.rt-ck-page { padding-bottom: 90px; }

.rt-ck-hero {
    width: 100%; padding: 76px 20px 120px; margin-bottom: -56px; text-align: center; color: #fff;
    background-color: #0F1F2E;
    background-image: linear-gradient(to right, rgba(15, 31, 46, .93), rgba(15, 31, 46, .88)), url('/assets/images/banner/banner.webp');
    background-size: cover; background-position: center;
}
[data-theme="dark"] .rt-ck-hero {
    background-color: #050505;
    background-image: linear-gradient(to right, rgba(0, 0, 0, .9), rgba(0, 0, 0, .86)), url('/assets/images/banner/banner-dark.webp');
}
.rt-ck-hero-ico {
    width: 62px; height: 62px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #4ADE80; background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .3);
    border-radius: 20px; box-shadow: 0 0 40px rgba(74, 222, 128, .18);
}
.rt-ck-hero h1 { margin: 0 0 12px; font-size: clamp(28px, 5vw, 44px); font-weight: 800; line-height: 1.3; color: #fff; }
.rt-ck-hero h1 .rt-hl { color: #4ADE80; }
.rt-ck-hero p { max-width: 560px; margin: 0 auto; font-size: 15px; line-height: 1.8; color: #E2E8F0; }

.rt-ck-container { position: relative; z-index: 5; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.rt-ck-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.rt-ck-main { display: flex; flex-direction: column; gap: 16px; }

.rt-ck-card {
    padding: 22px 24px; background: var(--rt-card-bg); border: 1px solid var(--rt-border); border-radius: 20px;
    box-shadow: var(--rt-card-shadow, 0 4px 15px rgba(15, 31, 46, .04)); transition: border-color .25s, box-shadow .25s;
}
.rt-ck-card:has(input:checked:not(:disabled)) { border-color: var(--rt-accent); box-shadow: 0 10px 30px rgba(22, 163, 74, .1); }
.rt-ck-card-head { display: flex; align-items: flex-start; gap: 16px; }
.rt-ck-card-ico {
    flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--rt-accent); background: var(--rt-tint); border-radius: 14px;
}
.rt-ck-card-txt { flex: 1; min-width: 0; }
.rt-ck-card-txt h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; font-size: 17px; font-weight: 800; color: var(--rt-text-main); }
.rt-ck-card-txt h2 em { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 10px; color: var(--rt-accent); background: var(--rt-tint); border-radius: 20px; }
.rt-ck-card-txt p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--rt-text-muted); }

.rt-ck-switch { position: relative; flex-shrink: 0; width: 50px; height: 28px; margin-top: 8px; cursor: pointer; }
.rt-ck-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rt-ck-slider { position: absolute; inset: 0; background: var(--rt-border); border-radius: 30px; transition: background .25s; pointer-events: none; }
.rt-ck-slider::before {
    content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; background: #fff;
    border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .25s cubic-bezier(.3, 0, .2, 1);
}
.rt-ck-switch input:checked + .rt-ck-slider { background: var(--rt-accent); }
.rt-ck-switch input:checked + .rt-ck-slider::before { transform: translateX(22px); }
[dir="rtl"] .rt-ck-switch input:checked + .rt-ck-slider::before { transform: translateX(-22px); }
.rt-ck-switch input:focus-visible + .rt-ck-slider { outline: 3px solid rgba(22, 163, 74, .35); outline-offset: 2px; }
.rt-ck-switch.is-locked { cursor: not-allowed; }
.rt-ck-switch.is-locked input { cursor: not-allowed; }
.rt-ck-switch.is-locked .rt-ck-slider { opacity: .6; }

.rt-ck-more { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rt-border); }
.rt-ck-more summary { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--rt-accent); cursor: pointer; list-style: none; }
.rt-ck-more summary::-webkit-details-marker { display: none; }
.rt-ck-more summary i { font-size: 10px; transition: transform .25s; }
.rt-ck-more[open] summary i { transform: rotate(180deg); }
.rt-ck-table { margin-top: 12px; border: 1px solid var(--rt-border); border-radius: 14px; overflow: hidden; }
.rt-ck-row { display: grid; grid-template-columns: 150px 1fr 110px; gap: 14px; padding: 12px 16px; font-size: 13px; line-height: 1.6; border-bottom: 1px solid var(--rt-border); }
.rt-ck-row:last-child { border-bottom: none; }
.rt-ck-row strong { color: var(--rt-text-main); word-break: break-word; }
.rt-ck-row span { color: var(--rt-text-muted); }
.rt-ck-row em { font-style: normal; font-weight: 600; text-align: end; color: var(--rt-text-main); }

.rt-ck-info { padding: 22px 24px; background: var(--rt-card-bg); border: 1px solid var(--rt-border); border-radius: 20px; }
.rt-ck-info h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--rt-text-main); }
.rt-ck-info details { border-bottom: 1px solid var(--rt-border); }
.rt-ck-info details:last-child { border-bottom: none; }
.rt-ck-info summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; cursor: pointer; list-style: none; }
.rt-ck-info summary::-webkit-details-marker { display: none; }
.rt-ck-info summary h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--rt-text-main); }
.rt-ck-info summary::after { content: '+'; font-size: 22px; font-weight: 500; color: var(--rt-accent); }
.rt-ck-info details[open] summary::after { content: '\2212'; }
.rt-ck-info p { margin: 0; padding-bottom: 14px; font-size: 14px; line-height: 1.8; color: var(--rt-text-muted); }

.rt-ck-side { position: sticky; top: calc(var(--header-h, 68px) + 20px); }
.rt-ck-panel { padding: 22px; background: var(--rt-card-bg); border: 1px solid var(--rt-border); border-radius: 20px; box-shadow: 0 14px 40px rgba(15, 31, 46, .1); }
.rt-ck-status { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 16px; background: var(--rt-tint); border-radius: 14px; }
.rt-ck-status strong { display: block; font-size: 14px; font-weight: 700; color: var(--rt-text-main); }
.rt-ck-status small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--rt-text-muted); }
.rt-ck-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: #F59E0B; box-shadow: 0 0 0 4px rgba(245, 158, 11, .2); }
.rt-ck-status[data-state="saved"] .rt-ck-dot { background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .22); }
.rt-ck-actions { display: flex; flex-direction: column; gap: 10px; }
.rt-ck-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.7; text-align: center; color: var(--rt-text-muted); }
.rt-ck-note a { color: var(--rt-accent); font-weight: 600; text-decoration: none; }
.rt-ck-note a:hover { text-decoration: underline; }

.rt-ck-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
    font-family: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer;
    color: var(--rt-text-main); background: var(--rt-card-bg); border: 1px solid var(--rt-border); border-radius: 12px;
    transition: var(--rt-ease, all .25s ease); box-sizing: border-box;
}
.rt-ck-btn:hover { border-color: var(--rt-accent); color: var(--rt-accent); transform: translateY(-1px); }
.rt-ck-btn-primary { color: #fff; background: var(--rt-accent); border-color: var(--rt-accent); }
.rt-ck-btn-primary:hover { color: #fff; filter: brightness(1.08); box-shadow: 0 8px 20px rgba(22, 163, 74, .3); }
.rt-ck-btn-ghost { background: transparent; }

.rt-ck-toast {
    position: fixed; left: 50%; bottom: 30px; z-index: 100001; display: flex; align-items: center; gap: 10px; padding: 12px 22px;
    font-size: 13.5px; font-weight: 600; color: var(--rt-text-main); background: var(--rt-card-bg); border: 1px solid var(--rt-accent);
    border-radius: 14px; box-shadow: 0 14px 40px rgba(15, 31, 46, .22); opacity: 0; pointer-events: none;
    transform: translate(-50%, 20px); transition: all .4s cubic-bezier(.16, 1, .3, 1); white-space: nowrap;
}
.rt-ck-toast i { color: var(--rt-accent); font-size: 16px; }
.rt-ck-toast.on { opacity: 1; transform: translate(-50%, 0); }

.rt-ckb {
    position: fixed; left: 50%; bottom: 20px; z-index: 100000; width: calc(100% - 40px); max-width: 980px;
    padding: 16px 20px; font-family: var(--rt-font, 'Poppins', sans-serif); background: var(--surface, #fff);
    background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--border-color, #E2E8EC); border-radius: 20px; box-shadow: 0 18px 50px rgba(15, 31, 46, .22);
    transform: translate(-50%, 140%); opacity: 0; transition: transform .5s cubic-bezier(.23, 1, .32, 1), opacity .4s ease;
}
.rt-ckb[hidden] { display: none; }
.rt-ckb.on { transform: translate(-50%, 0); opacity: 1; }
.rt-ckb-inner { display: flex; align-items: center; gap: 16px; }
.rt-ckb-ico { flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--rt-accent); background: var(--rt-tint); border-radius: 13px; }
.rt-ckb-text { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.65; color: var(--rt-text-main); }
.rt-ckb-text a { color: var(--rt-accent); font-weight: 600; text-decoration: none; }
.rt-ckb-text a:hover { text-decoration: underline; }
.rt-ckb-btns { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.rt-ckb .rt-ck-btn { min-height: 40px; padding: 0 16px; font-size: 13px; white-space: nowrap; }

@media (max-width: 900px) {
    .rt-ck-layout { grid-template-columns: minmax(0, 1fr); }
    .rt-ck-side { position: static; order: -1; }
}

@media (max-width: 768px) {
    .rt-ck-hero {
        padding: 52px 16px 96px; margin-bottom: -48px;
        background-image: linear-gradient(to right, rgba(15, 31, 46, .93), rgba(15, 31, 46, .88)), url('/assets/images/banner/m-light.webp');
    }
    [data-theme="dark"] .rt-ck-hero { background-image: linear-gradient(to right, rgba(0, 0, 0, .9), rgba(0, 0, 0, .86)), url('/assets/images/banner/m-dark.webp'); }
    .rt-ck-hero p { font-size: 14px; }
    .rt-ck-hero-ico { width: 54px; height: 54px; font-size: 22px; margin-bottom: 14px; }
    .rt-ck-container { padding: 0 16px; }
    .rt-ck-card, .rt-ck-info { padding: 18px 16px; border-radius: 18px; }
    .rt-ck-card-head { gap: 12px; }
    .rt-ck-card-ico { width: 40px; height: 40px; font-size: 16px; border-radius: 12px; }
    .rt-ck-card-txt h2 { font-size: 15.5px; }
    .rt-ck-card-txt p { font-size: 13px; }
    .rt-ck-row { grid-template-columns: 1fr; gap: 4px; }
    .rt-ck-row em { text-align: start; }
    .rt-ck-actions { gap: 10px; }
    .rt-ck-actions .rt-ck-btn { width: 100%; white-space: nowrap; text-align: center; }
    .rt-ck-toast { bottom: 90px; }

    .rt-ckb { left: 12px; right: 12px; width: auto; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); padding: 14px; transform: translateY(160%); }
    .rt-ckb.on { transform: translateY(0); }
    .rt-ckb-inner { flex-direction: column; align-items: stretch; gap: 12px; }
    .rt-ckb-ico { display: none; }
    .rt-ckb-text { font-size: 12.5px; }
    .rt-ckb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .rt-ckb .rt-ck-btn { min-width: 0; padding: 6px 8px; font-size: 12.5px; line-height: 1.35; white-space: normal; text-align: center; }
    .rt-ckb-btns .rt-ck-btn-primary { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .rt-ckb, .rt-ck-toast, .rt-ck-slider, .rt-ck-slider::before { transition: none; }
}