.data-retention-page-v1 {
    --retention-danger: #c93445;
    --retention-danger-soft: #fff3f4;
}

.data-retention-grid-v1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.data-retention-page-v1 .retention-policy-card-v1,
.data-retention-page-v1 .retention-manual-card-v1 {
    overflow: hidden;
}

.data-retention-page-v1 .retention-policy-card-v1.is-sensitive {
    border-color: #f1c6cc;
}

.retention-policy-body-v1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
}

.retention-policy-body-v1 > label:not(.retention-toggle-v1) > span:first-child,
.retention-manual-grid-v1 label > span {
    display: block;
    margin-bottom: 7px;
    color: var(--sys-ink);
    font: 750 11px Manrope, sans-serif;
}

.retention-policy-body-v1 i {
    color: var(--retention-danger);
    font-style: normal;
}

.retention-policy-body-v1 small {
    display: block;
    margin-top: 6px;
    color: var(--sys-muted);
    font: 600 9px/1.5 Manrope, sans-serif;
}

.data-retention-page-v1 .system-input-suffix-v6 b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 0 10px;
    border: 1px solid var(--sys-line);
    border-left: 0;
    border-radius: 0 9px 9px 0;
    background: var(--sys-canvas);
    color: var(--sys-ink);
    font: 750 10px Manrope, sans-serif;
}

.retention-toggle-v1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--sys-line);
    border-radius: 10px;
    background: var(--sys-canvas);
}

.retention-toggle-v1 span {
    min-width: 0;
}

.retention-toggle-v1 b,
.retention-toggle-v1 small {
    display: block;
}

.retention-toggle-v1 b {
    color: var(--sys-ink);
    font: 750 11px Manrope, sans-serif;
}

.retention-toggle-v1 small {
    margin-top: 3px;
}

.retention-toggle-v1 input {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    accent-color: var(--sys-accent);
}

.retention-timeline-v1 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--sys-line);
    border-bottom: 1px solid var(--sys-line);
}

.retention-timeline-v1 div {
    min-width: 0;
    padding: 12px 14px;
}

.retention-timeline-v1 div + div {
    border-left: 1px solid var(--sys-line);
}

.retention-timeline-v1 dt {
    color: var(--sys-muted);
    font: 650 8px Manrope, sans-serif;
}

.retention-timeline-v1 dd {
    overflow: hidden;
    margin: 4px 0 0;
    color: var(--sys-ink);
    font: 750 10px/1.35 Manrope, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.retention-result-v1 {
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    color: var(--sys-muted);
    font: 600 9px/1.55 Manrope, sans-serif;
}

.retention-savebar-v1 {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--sys-line);
    border-radius: 12px;
    background: var(--sys-canvas);
    color: var(--sys-muted);
    font: 600 9px/1.5 Manrope, sans-serif;
}

.retention-savebar-v1 span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.retention-savebar-v1 .ui-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--sys-success);
}

.retention-savebar-v1 b {
    color: var(--sys-ink);
}

.retention-manual-card-v1 {
    margin-top: 16px;
    border-color: #f1c6cc !important;
}

.retention-manual-grid-v1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.retention-manual-grid-v1 form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding: 14px 16px;
}

.retention-manual-grid-v1 form + form {
    border-left: 1px solid var(--sys-line);
}

.retention-manual-grid-v1 code {
    color: var(--retention-danger);
    font: 800 10px ui-monospace, Consolas, monospace;
}

.admin-surface .data-retention-page-v1 .retention-manual-grid-v1 input {
    width: 100%;
    min-height: 39px;
}

.data-retention-page-v1 .system-text-button-v6.danger {
    color: var(--retention-danger);
}

html[data-color-scheme="dark"] .data-retention-page-v1 .retention-policy-card-v1.is-sensitive,
html[data-color-scheme="dark"] .data-retention-page-v1 .retention-manual-card-v1 {
    border-color: #6b3641 !important;
}

html[data-color-scheme="dark"] .data-retention-page-v1 .retention-toggle-v1,
html[data-color-scheme="dark"] .data-retention-page-v1 .retention-savebar-v1 {
    background: #131c2d;
}

html[data-color-scheme="dark"] .data-retention-page-v1 .system-input-suffix-v6 b {
    border-color: #30394d;
    background: #1a2538;
    color: #f3f6fb;
}

html[data-color-scheme="dark"] .data-retention-page-v1 .system-text-button-v6.danger {
    border-color: #6b3641;
    background: #2a1a24;
    color: #ff9eaa;
}

@media (max-width: 900px) {
    .data-retention-grid-v1,
    .retention-manual-grid-v1 {
        grid-template-columns: 1fr;
    }

    .retention-manual-grid-v1 form + form {
        border-top: 1px solid var(--sys-line);
        border-left: 0;
    }
}

@media (max-width: 600px) {
    .retention-timeline-v1 {
        grid-template-columns: 1fr;
    }

    .retention-timeline-v1 div + div {
        border-top: 1px solid var(--sys-line);
        border-left: 0;
    }

    .retention-savebar-v1,
    .retention-manual-grid-v1 form {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }
}