/* same base styles with defaults */ 
:root{
  --cclite-bg: #f9f9f9;
  --cclite-fg: #111111;
  --cclite-border: #e5e7eb;
  --cclite-btn-border: currentColor;
  --cclite-btn-bg: transparent;
  --cclite-btn-fg: currentColor;
  --cclite-btn-radius: 6px;
  --cclite-shadow: 0 -2px 12px rgba(0,0,0,.06);

  --cclite-modal-bg: #ffffff;
  --cclite-modal-fg: #111111;

  --cclite-btn-primary-bg: #0e5d93;
  --cclite-btn-primary-fg: #ffffff;
  --cclite-btn-secondary-bg: #e5e7eb;
  --cclite-btn-secondary-fg: #111111;

  --cclite-accent: var(--cclite-btn-primary-bg);

  --cclite-reopen-bg: var(--cclite-accent);
  --cclite-reopen-fg: #ffffff;
  --cclite-reopen-border: var(--cclite-accent);

  --cclite-font: 'Segoe UI', Segoe UI, system-ui, -apple-system, Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif;
}
.cclite.dark{
  --cclite-bg: #0f172a;
  --cclite-fg: #e5e7eb;
  --cclite-border: #334155;
  --cclite-modal-bg: #111827;
  --cclite-modal-fg: #e5e7eb;
  --cclite-btn-secondary-bg: #334155;
  --cclite-btn-secondary-fg: #e5e7eb;
}
#cclite-banner{position:fixed;left:0;right:0;bottom:0;z-index:2147483646;font-family:var(--cclite-font); margin-bottom:6px;}
#cclite-banner .cclite-inner{
  width:100%; padding:14px; display:flex; gap:14px;
  align-items:center; justify-content:space-between;
  box-shadow:var(--cclite-shadow); background:var(--cclite-bg); color:var(--cclite-fg);
  border-top:1px solid var(--cclite-border)
}
#cclite-banner .cclite-actions{display:flex;gap:8px}
#cclite-banner .cclite-btn{border:1px solid var(--cclite-btn-border);padding:8px 12px;border-radius:var(--cclite-btn-radius);background:var(--cclite-btn-bg);color:var(--cclite-btn-fg);cursor:pointer}
#cclite-banner .cclite-btn.primary{background:var(--cclite-btn-primary-bg);color:var(--cclite-btn-primary-fg);border-color:var(--cclite-btn-primary-bg)}
#cclite-banner .cclite-btn.secondary{background:var(--cclite-btn-secondary-bg);color:var(--cclite-btn-secondary-fg);border-color:var(--cclite-btn-secondary-bg)}
#cclite-banner .cclite-modal,
#cclite-modal-root .cclite-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:2147483647;font-family:var(--cclite-font);}
#cclite-banner .cclite-modal[hidden]{display:none !important;}
#cclite-banner .cclite-modal.bottom .cclite-modal-card,
#cclite-modal-root .cclite-modal.bottom .cclite-modal-card{background:var(--cclite-modal-bg);color:var(--cclite-modal-fg);width:100%;border-radius:12px 12px 0 0;padding:16px;box-shadow:0 -6px 18px rgba(0,0,0,.1);text-align:center;display:flex;flex-direction:column;align-items:center;}
#cclite-banner .cclite-modal-card h3,
#cclite-modal-root .cclite-modal-card h3{width:100%; max-width:720px; margin:0 auto 8px auto; text-align:left;}
#cclite-banner .cclite-switch,
#cclite-modal-root .cclite-switch{display:flex;flex-direction:row;gap:10px;align-items:center;margin:10px 0;width:100%; max-width:720px;justify-content:flex-start;}
#cclite-banner .cclite-switch span,
#cclite-modal-root .cclite-switch span{ flex:1 1 auto; text-align:left; }
#cclite-banner .cclite-modal-actions,
#cclite-modal-root .cclite-modal-actions{display:flex;justify-content:center;gap:8px;margin-top:12px; width:100%;}
#cclite-banner .cclite-modal .cclite-btn,
#cclite-modal-root .cclite-modal .cclite-btn{background: var(--cclite-accent, #0e5d93);color: #fff;border-color: var(--cclite-accent, #0e5d93);}
.cclite-modal-open #cclite-reopen{ display:none !important; }
#cclite-reopen.cclite-reopen{position:fixed;bottom:16px;padding:10px 12px;border-radius:999px;border:1px solid var(--cclite-reopen-border, var(--cclite-accent, #0e5d93)) !important;background:var(--cclite-reopen-bg, var(--cclite-accent, #0e5d93)) !important;color:var(--cclite-reopen-fg, #fff) !important;z-index:2147483645; box-shadow:0 2px 10px rgba(0,0,0,.15);font-family:var(--cclite-font);}
#cclite-reopen.cclite-reopen.right{right:16px;}
#cclite-reopen.cclite-reopen.left{left:16px;}
#cclite-debug.cclite-debug{position:fixed; left:16px; bottom:16px; z-index:2147483646;background:var(--cclite-modal-bg); color:var(--cclite-modal-fg);border:1px solid var(--cclite-border); border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.15);font-family:var(--cclite-font); font-size:12px;padding:10px; min-width:220px; max-width:420px;}
#cclite-debug .cclite-debug-actions{ display:flex; gap:8px; margin-top:8px; }
#cclite-debug .cclite-btn{ padding:6px 8px; border-radius:6px; border:1px solid var(--cclite-border); background:#e5e7eb; color:#111; cursor:pointer; }
#cclite-debug .cclite-btn.primary{ background:var(--cclite-accent); border-color:var(--cclite-accent); color:#fff; }
@media (max-width:640px){
  #cclite-banner .cclite-inner{flex-direction:column;align-items:flex-start; gap:10px !important;}
  #cclite-banner .cclite-actions{flex-wrap:wrap !important; gap:6px !important;}
  #cclite-banner .cclite-btn{font-size:0.85em !important; padding:6px 8px !important;}
}