.checkpoint-dialog { width: min(1080px,calc(100vw - 28px)); max-height: 92dvh; padding: 0; border: 1px solid #c4baa5; border-radius: 10px; background: #fffdf5; color: #233c60; font: 17px/1.5 var(--rocode-font-family,Arial,sans-serif); }
.checkpoint-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 2; padding: 18px 24px; border-bottom: 1px solid #d8cfbd; background: #fffdf5; }
.checkpoint-heading p { margin: 0 0 3px; color: #617080; font-size: 12px; font-weight: 700; letter-spacing: .7px; }
.checkpoint-heading h2 { margin: 0; font-size: 27px; }
.checkpoint-dialog button { min-height: 44px; padding: 9px 13px; border: 1px solid #b6c5d4; border-radius: 6px; background: #fff; color: #284c74; font: 650 16px/1.35 var(--rocode-font-family,Arial,sans-serif); cursor: pointer; }
.checkpoint-dialog button:hover:not(:disabled) { background: #eaf2fc; border-color: #739bcc; }
.checkpoint-dialog :is(button,input,select):focus-visible { outline: 3px solid #245fb4; outline-offset: 2px; }
.checkpoint-dialog button:disabled { color: #7a7e82; background: #eeede7; cursor: default; }
.checkpoint-heading>button,.checkpoint-preview-heading>button { width: 44px; flex-shrink: 0; padding: 0; font-size: 26px; }
.checkpoint-body { padding: 20px 24px 24px; }
.checkpoint-intro { margin: 0 0 20px; max-width: 70ch; }
.checkpoint-save { display: flex; align-items: end; gap: 12px; }
.checkpoint-save label { flex: 1; font-weight: 700; }
.checkpoint-save input { display: block; width: 100%; min-height: 48px; margin-top: 7px; padding: 10px 12px; border: 1px solid #a9bad0; border-radius: 6px; background: #fff; color: #233c60; font: inherit; }
.checkpoint-save button,.checkpoint-dialog .checkpoint-restore { border-color: #255fa6; background: #326ddd; color: white; }
.checkpoint-save button { min-height: 48px; }
.checkpoint-dialog .checkpoint-restore:hover,.checkpoint-save button:hover:not(:disabled) { background: #255bb6; color: white; }
.checkpoint-capacity,.checkpoint-storage,.checkpoint-preview-tip { color: #5f6e7e; font-size: 14px; }
.checkpoint-capacity { margin: 10px 0 0; }
.checkpoint-message { min-height: 26px; margin: 10px 0; color: #286340; }
.checkpoint-message.error { color: #963e32; }
.checkpoint-content { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; align-items: start; }
.checkpoint-content:has(.checkpoint-preview:not([hidden])) { grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); }
.checkpoint-list { display: grid; gap: 12px; min-width: 0; }
.checkpoint-card,.checkpoint-empty { padding: 16px; border: 1px solid #d4c9b1; border-radius: 6px; background: #fffcf0; box-shadow: 0 2px 0 #e2dac8; }
.checkpoint-card h3 { margin: 0 0 6px; font-size: 19px; overflow-wrap: anywhere; }
.checkpoint-card time { color: #647386; font-size: 14px; }
.checkpoint-card>p { margin: 6px 0 12px; font-size: 14px; color: #52677c; }
.checkpoint-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.checkpoint-dialog .checkpoint-remove { background: transparent; border-color: transparent; color: #7b5041; }
.checkpoint-confirm { margin-top: 14px; border-top: 1px solid #d9c9b4; padding-top: 10px; }
.checkpoint-confirm p { margin: 0 0 10px; font-size: 15px; }
.checkpoint-confirm button { margin-right: 5px; }
.checkpoint-dialog [data-remove-confirm] { color: #943a30; border-color: #d4a098; }
.checkpoint-preview { min-width: 0; border: 1px solid #c3cdd8; border-radius: 6px; background: #fff; overflow: hidden; }
.checkpoint-preview-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; background: #edf3fb; }
.checkpoint-preview-heading h3 { flex: 1 1 160px; min-width: 0; margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.checkpoint-preview-heading label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.checkpoint-preview-heading select { max-width: 150px; min-height: 44px; border: 1px solid #aabbcf; border-radius: 5px; padding: 7px; background: #fff; color: #233c60; font: inherit; }
.checkpoint-preview-detail { margin: 0; padding: 9px 12px; font-size: 13px; color: #607082; }
.checkpoint-preview iframe { display: block; width: 100%; height: 360px; border: 0; border-block: 1px solid #d5dde5; background: #fff; }
.checkpoint-preview-tip { margin: 0; padding: 10px 12px; }
.checkpoint-storage { margin: 22px 0 0; max-width: 85ch; }
@media(max-width:760px) { .checkpoint-content:has(.checkpoint-preview:not([hidden])) { grid-template-columns: minmax(0,1fr); }.checkpoint-heading { padding: 14px 16px; }.checkpoint-body { padding: 16px; }.checkpoint-save { align-items: stretch; flex-direction: column; }.checkpoint-save button { align-self: flex-start; }.checkpoint-preview iframe { height: 340px; } }