/* ============================================================
   leapdeck — Cookie 同意横幅 + 偏好中心
   依赖 leapdeck.css 的设计变量(--blue / --grad / --ink ...)
============================================================ */

/* ---- 底部同意横幅 ---- */
.ck-banner{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(140%);
  z-index:9000;width:min(920px,calc(100vw - 32px));
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:20px 24px;box-shadow:var(--shadow-lg);
  opacity:0;transition:transform .55s var(--ease),opacity .45s var(--ease)
}
.ck-banner.show{transform:translateX(-50%) translateY(0);opacity:1}
.ck-banner .ck-txt{flex:1 1 420px;color:var(--ink-soft);font-size:.92rem;line-height:1.65}
.ck-banner .ck-txt strong{display:block;color:var(--ink);font-weight:700;font-size:1.02rem;margin-bottom:4px}
.ck-banner .ck-txt a{color:var(--blue-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ck-banner .ck-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---- 通用按钮 ---- */
.ck-btn{cursor:pointer;border:none;font:inherit;font-weight:600;font-size:.9rem;
  padding:11px 20px;border-radius:12px;transition:all .25s var(--ease);white-space:nowrap}
.ck-btn-primary{background:var(--grad);background-size:160% 160%;color:#fff;box-shadow:var(--shadow-brand)}
.ck-btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)}
.ck-btn-ghost{background:var(--bg-2);color:var(--ink)}
.ck-btn-ghost:hover{background:var(--line-2)}
.ck-btn-text{background:none;color:var(--ink-soft);padding:11px 12px}
.ck-btn-text:hover{color:var(--ink)}

/* ---- 偏好中心弹窗 ---- */
.ck-scrim{position:fixed;inset:0;z-index:9500;background:rgba(21,40,70,.42);
  backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.ck-scrim.show{opacity:1;visibility:visible}
.ck-modal{position:fixed;left:50%;top:50%;z-index:9600;
  transform:translate(-50%,-46%);opacity:0;visibility:hidden;
  width:min(560px,calc(100vw - 32px));max-height:88vh;overflow:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:30px 30px 26px;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.ck-modal.show{transform:translate(-50%,-50%);opacity:1;visibility:visible}
.ck-modal h3{font-size:1.35rem;line-height:1.3;margin:0 0 6px;color:var(--ink)}
.ck-modal .ck-sub{color:var(--ink-soft);font-size:.92rem;line-height:1.6;margin:0 0 20px}
.ck-modal .ck-sub a{color:var(--blue-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---- 分类项 ---- */
.ck-item{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
  padding:16px 0;border-top:1px solid var(--line)}
.ck-item .ck-info{flex:1}
.ck-item .ck-info .t{font-weight:700;color:var(--ink);font-size:.98rem;margin-bottom:3px}
.ck-item .ck-info .d{color:var(--ink-soft);font-size:.86rem;line-height:1.55}

/* ---- 开关 ---- */
.ck-switch{flex:none;position:relative;width:46px;height:26px;margin-top:2px}
.ck-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ck-switch .track{position:absolute;inset:0;background:var(--line-2);border-radius:20px;transition:background .25s var(--ease)}
.ck-switch .track::before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;
  background:#fff;border-radius:50%;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease)}
.ck-switch input:checked + .track{background:var(--blue)}
.ck-switch input:checked + .track::before{transform:translateX(20px)}
.ck-switch input:disabled{cursor:not-allowed}
.ck-switch input:disabled + .track{background:var(--blue-deep);opacity:.5}

.ck-modal .ck-foot{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}

/* ---- 页内“管理偏好”触发按钮 ---- */
.ck-manage-link{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--blue-deep);
  font:inherit;font-weight:600;font-size:.92rem;padding:10px 18px;border-radius:12px;
  margin-top:4px;transition:all .25s var(--ease)}
.ck-manage-link:hover{background:var(--surface);box-shadow:var(--shadow-sm)}

@media(max-width:560px){
  .ck-banner{padding:18px 18px;gap:14px}
  .ck-banner .ck-acts{width:100%}
  .ck-banner .ck-acts .ck-btn{flex:1}
  .ck-modal{padding:24px 22px 22px}
}
@media(prefers-reduced-motion:reduce){
  .ck-banner,.ck-modal,.ck-scrim{transition:opacity .2s linear}
}