:root{
  --cwl-accent: var(--ml-primary, #ff6a00);
  --cwl-bg:#fff;
  --cwl-fg:#1b1f23;
  --cwl-muted:#6a737d;
  --cwl-border:#e1e4e8;
  --cwl-chip:#f1f3f5;
  --cwl-danger:#c92a2a;
  --cwl-success:#2b8a3e;
  --cwl-shadow:0 10px 25px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
  --cwl-font:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans";
  --cwl-text:16px; --cwl-small:14px; --cwl-title:18px;
  --cwl-radius:14px;
}

/* ===== Buttons (shortcode) ===== */
.cwl-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; font:600 15px/1 var(--cwl-font);
  cursor:pointer; border:1px solid var(--cwl-border); transition:.15s;
}
.cwl-btn i{ font-size:16px; }
.cwl-btn--solid{ background:var(--cwl-accent); color:#fff; border-color:transparent; }
.cwl-btn--solid:hover{ filter:brightness(0.96); }
.cwl-btn--ghost{ background:#fff; color:var(--cwl-fg); }
.cwl-btn--ghost:hover{ border-color:#b5b9be; }

/* ===== Spinners & Skeletons ===== */
@keyframes cwl-spin{ to{ transform:rotate(360deg); } }
.cwl-spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(0,0,0,.15); border-top-color:var(--cwl-accent); display:inline-block; animation:cwl-spin .8s linear infinite; vertical-align:-2px; }

@keyframes cwl-shimmer{ 0%{ background-position:-200px 0; } 100%{ background-position: calc(200px + 100%) 0; } }
.cwl-skel .cwl-skel-line, .cwl-skel .cwl-skel-ic, .cwl-skel .cwl-skel-chip, .cwl-skel .cwl-skel-pill{
  background: linear-gradient(90deg, #f2f4f6 25%, #e9ecef 37%, #f2f4f6 63%);
  background-size: 200px 100%; animation: cwl-shimmer 1.2s linear infinite; border-radius:8px;
}
.cwl-skel-ic{ width:72px; height:72px; border-radius:50%; }
.cwl-skel-line{ height:14px; }
.cwl-skel-chip{ height:22px; border-radius:999px; }
.cwl-skel-pill{ height:30px; border-radius:999px; }
.w-70{ width:70%; } .w-60{ width:60%; } .w-40{ width:40%; } .w-20{ width:20%; } .w-15{ width:15%; }

/* Toast */
.cwl-toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px; background:#111; color:#fff;
  padding:10px 14px; border-radius:10px; box-shadow:var(--cwl-shadow); opacity:0; pointer-events:none; transition:opacity .25s;
  font:500 var(--cwl-small)/1.2 var(--cwl-font); z-index:99999; }
.cwl-toast.show{ opacity:1; } .cwl-toast.err{ background:#a4161a; }

/* ===== Popup (add-to modal & cover picker) ===== */
.cwl-modal{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9999; display:flex; align-items:flex-start; justify-content:center; padding-top:6vh; }
.cwl-dialog{ width:min(760px,94vw); background:var(--cwl-bg); border-radius:16px; box-shadow:var(--cwl-shadow);
  overflow:hidden; font:400 var(--cwl-text)/1.5 var(--cwl-font); color:var(--cwl-fg); position:relative; }
.cwl-head{ padding:16px 18px; border-bottom:1px solid var(--cwl-border); } .cwl-head strong{ font-size:22px; }
.cwl-body{ padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.cwl-body input[type="search"], .cwl-body input[type="text"], .cwl-body select{
  font:400 var(--cwl-text)/1.2 var(--cwl-font); padding:12px; border:1px solid var(--cwl-border); border-radius:12px; background:#fff; width:100%;
}
.cwl-create{ display:grid; grid-template-columns: 1fr 220px 170px; gap:10px; }
.cwl-btn-create{ padding:12px 14px; border-radius:12px; border:1px solid var(--cwl-accent); background:var(--cwl-accent); color:#fff; font-weight:700; }
.cwl-list[aria-busy="true"]{ opacity:.85; }
.cwl-list{ display:flex; flex-direction:column; gap:10px; max-height:48vh; overflow:auto; padding-right:4px; }
.cwl-empty{ color:var(--cwl-muted); font-size:var(--cwl-small); padding:12px; text-align:center; }
.cwl-close{ position:absolute; top:8px; right:10px; width:36px; height:36px; border:none; background:transparent; font-size:24px; cursor:pointer; }

.cwl-row{ display:grid; align-items:center; grid-template-columns: 44px 1fr auto auto; gap:12px; border:1px solid var(--cwl-border);
  border-radius:12px; padding:12px; background:#fff; }
.cwl-row.is-pending{ opacity:.8; }
.cwl-toggle{ width:40px; height:40px; border-radius:12px; border:1px solid var(--cwl-border); background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:18px; color:#6a737d; transition:all .15s; position:relative; }
.cwl-toggle.on{ border-color:rgba(43,138,62,.35); color:var(--cwl-success); box-shadow:inset 0 0 0 2px rgba(43,138,62,.12); }
.cwl-title{ font-size:var(--cwl-text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cwl-chip{ background:var(--cwl-chip); color:#111; padding:6px 10px; border-radius:999px; font-size:var(--cwl-small); text-transform:lowercase; }
.cwl-chip.public{ background:#e7f5ff; color:#0c8599; }
.cwl-count{ color:var(--cwl-muted); font-size:var(--cwl-small); }

/* ===== Cover picker tabs ===== */
.cwl-tabbar{ display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--cwl-border); }
.cwl-tab{ padding:8px 12px; border-radius:999px; border:1px solid var(--cwl-border); background:#fff; cursor:pointer; font-weight:700; font-size:14px; }
.cwl-tab.on{ border-color:var(--cwl-accent); color:var(--cwl-accent); }
.cwl-tabpanel{ padding:12px 14px; }
.cwl-pane.hidden{ display:none; }

.cwl-media-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:12px; }
.cwl-media-cell{ aspect-ratio:1/1; border:2px solid transparent; border-radius:14px; overflow:hidden; background:#f8f9fa; cursor:pointer; }
.cwl-media-cell:hover{ border-color:var(--cwl-accent); }
.cwl-media-img{ display:block; width:100%; height:100%; background-size:cover; background-position:center; }

.cwl-url-input{ width:100%; padding:10px 12px; border:1px solid var(--cwl-border); border-radius:12px; margin-right:8px; }
.cwl-url-apply, .cwl-upload-launch, .cwl-mosaic-generate, .cwl-mosaic-apply{
  padding:10px 12px; border-radius:12px; border:1px solid var(--cwl-border); background:#fff; cursor:pointer; font-weight:700; font-size:14px; margin-top:8px;
}
.cwl-mosaic-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.cwl-mosaic-canvas{ width:360px; height:360px; max-width:100%; border-radius:12px; border:1px solid var(--cwl-border); background:#f1f3f5; }

/* ===== Dashboard cards ===== */
.cwl-dashboard{ font:400 var(--cwl-text)/1.6 var(--cwl-font); color:var(--cwl-fg); }
.cwl-db-toolbar{ display:grid; grid-template-columns: 1fr auto; gap:12px; margin:8px 0 16px; }
.cwl-db-create{ display:flex; gap:8px; }
.cwl-db-create input, .cwl-db-create select{ font:400 var(--cwl-text)/1.2 var(--cwl-font); padding:10px 12px; border:1px solid var(--cwl-border); border-radius:12px; }
.cwl-db-create-btn{ padding:10px 14px; border-radius:12px; border:1px solid var(--cwl-accent); background:var(--cwl-accent); color:#fff; font-weight:700; }
.cwl-db-grid{ display:grid; grid-template-columns: repeat( auto-fill, minmax(280px, 1fr) ); gap:14px; }

.cwl-db-card{
  position:relative; border:1px solid var(--cwl-border); border-radius:var(--cwl-radius); background:#fff; padding:12px 12px 10px;
  box-shadow:var(--cwl-shadow); display:flex; flex-direction:column; gap:8px; cursor:pointer; min-height:126px; overflow:visible;
}
.cwl-db-card:hover{ box-shadow:0 12px 28px rgba(0,0,0,.09), 0 3px 8px rgba(0,0,0,.06); }
.cwl-card-head{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; }
.cwl-card-title{ font-size:18px; font-weight:800; display:flex; align-items:center; gap:8px; }
.cwl-title-bookmark{ color:var(--cwl-accent); }

/* bigger cover circle on cards */
.cwl-card-cover{ width:80px; height:80px; border-radius:50%; background-size:cover; background-position:center; border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.cwl-card-cover-empty{ display:flex; align-items:center; justify-content:center; color:#adb5bd; background:#f8f9fa; }

.cwl-db-sub{ display:flex; align-items:center; gap:8px; color:var(--cwl-muted); font-size:var(--cwl-small); }
.cwl-dot{ opacity:.5; }

.cwl-db-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cwl-act{ padding:6px 10px; border-radius:12px; border:1px solid var(--cwl-border); background:#fff; font-weight:700; font-size:var(--cwl-small); cursor:pointer; }
.cwl-act:hover{ border-color:#adb5bd; }
.cwl-act.danger{ border-color:var(--cwl-danger); color:var(--cwl-danger); }
.cwl-act i{ pointer-events:none; }

/* Red delete cross — smaller & inside card */
.cwl-card-close{
  position:absolute; top:8px; right:8px; width:26px; height:26px;
  border-radius:50%; background:#fff; border:1px solid var(--cwl-danger); color:var(--cwl-danger);
  display:flex; align-items:center; justify-content:center; z-index:2; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.cwl-card-close:hover{ background:#fff5f5; }

/* Ribbon on left */
.cwl-ribbon{
  position:absolute; left:-1px; top:-1px; width:0; height:0;
  border-top:28px solid var(--cwl-accent); border-right:14px solid transparent;
  border-left:0; border-bottom:0; filter:drop-shadow(0 2px 3px rgba(0,0,0,.12));
}
.cwl-ribbon-skel{ position:absolute; left:-1px; top:-1px; width:0; height:0; border-top:28px solid #eee; border-right:14px solid transparent; }

/* ===== Inline details view ===== */
.cwl-db-grid.cwl-inline{ display:block; }
.cwl-inline-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cwl-inline-title{ font-size:22px; font-weight:800; }
.cwl-db-back{ padding:8px 12px; border-radius:12px; border:1px solid var(--cwl-border); background:#fff; cursor:pointer; font-weight:700; }

.cwl-detail-grid{ display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:18px; align-items:start; }

/* LEFT column (items) */
.cwl-items{ display:flex; flex-direction:column; gap:10px; }
.cwl-item-row{ display:grid; grid-template-columns: 40px 1fr auto; align-items:center; gap:12px; border:1px solid var(--cwl-border); border-radius:12px; padding:10px 12px; background:#fff; }
.cwl-item-title{ color:var(--cwl-fg); text-decoration:none; font-weight:600; }
.cwl-item-title:hover{ text-decoration:underline; }
.cwl-item-remove{ background:#fff; border:1px solid var(--cwl-border); color:#a61e4d; padding:8px 10px; border-radius:12px; cursor:pointer; font-size:14px; }
.cwl-num{ width:28px; height:28px; border-radius:50%; background:#f1f3f5; color:#333; display:flex; align-items:center; justify-content:center; font-weight:700; }

/* RIGHT column (cover + notes) */
.cwl-detail-right{ display:flex; flex-direction:column; gap:14px; }
.cwl-cover-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.cwl-list-cover{ width:140px; height:140px; border-radius:50%; background:#f1f3f5; display:flex; align-items:center; justify-content:center; color:#adb5bd; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.cwl-list-cover.has-img{ background-size:cover; background-position:center; color:transparent; }
.cwl-cover-actions{ display:flex; gap:8px; }
.cwl-cover-select{ padding:8px 10px; border-radius:12px; border:1px solid var(--cwl-border); background:#fff; cursor:pointer; font-weight:700; font-size:14px; }
.cwl-cover-select.btn-sm{ padding:6px 10px; font-size:13px; }

.cwl-cover-notes textarea.cwl-notes{ width:100%; min-height:120px; border:1px solid var(--cwl-border); border-radius:12px; padding:10px 12px; font:400 var(--cwl-text)/1.5 var(--cwl-font); }
.cwl-notes-label{ display:block; font-size:14px; font-weight:700; margin-bottom:6px; color:#2f3235; }
.cwl-notes-status{ font-size:12px; color:var(--cwl-muted); }

/* Responsive */
@media (max-width: 900px){
  .cwl-detail-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .cwl-create{ grid-template-columns: 1fr; }
  .cwl-db-toolbar{ grid-template-columns: 1fr; }
  .cwl-row{ grid-template-columns: 44px 1fr; gap:8px; }
  .cwl-chip, .cwl-count{ justify-self:start; }
  .cwl-card-cover{ width:72px; height:72px; }
  .cwl-list-cover{ width:120px; height:120px; }
}