:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --muted:#667085;
  --text:#101828;
  --border:#e6e8ef;
  --shadow:0 10px 30px rgba(16,24,40,.08);
  --shadow2:0 2px 10px rgba(16,24,40,.06);
  --brand:#2563eb;
  --brand2:#1d4ed8;
  --ok:#16a34a;
  --warn:#f59e0b;
  --danger:#ef4444;
  --chip:#eef2ff;
  --chipText:#3730a3;
  --radius:8px;
  --radius2:12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
.desc {
  font-size: 14px !important;
  margin-top:6px;
  color:#1f2937;
  font-size:13px;line-height:1.5;
  border-bottom: solid 2px aliceblue !important;
  padding-bottom: 10px !important;
  margin-bottom: 8px !important;
  margin-top: 15px !important;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.app{max-width:1680px;margin:28px auto;padding:0 18px}

.top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap}
.title{display:flex;flex-direction:column;gap:4px}
h1{margin:0;font-size:22px;letter-spacing:-.3px}
.subtitle{color:var(--muted);font-size:13px;line-height:1.4}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:8px 10px;display:flex;gap:8px;align-items:center;box-shadow:var(--shadow2)}
.pill label{font-size:12px;color:var(--muted)}
.pill select,.pill input{border:0;outline:none;font-size:13px;background:transparent;color:var(--text)}
.pill input{width:220px}

.grid{display:grid;grid-template-columns: 260px 1fr;gap:16px}
@media (max-width: 980px){.grid{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 24px !important}
.card h2{margin:0 0 10px 0;font-size:14px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em}

.kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.k{border:1px solid var(--border);border-radius:var(--radius2);padding:12px}
.k .n{font-size:20px;font-weight:700;letter-spacing:-.3px}
.k .l{font-size:12px;color:var(--muted)}

.barWrap{margin-top:12px;border:1px solid var(--border);border-radius:999px;padding:4px;background:#fbfbff}
.bar{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand2));width:0%}
.barMeta{display:flex;justify-content:space-between;gap:10px;margin-top:8px;color:var(--muted);font-size:12px}

.btnRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
button, a{
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  border-radius:12px;padding:10px 12px;font-size:13px;cursor:pointer;
  box-shadow:var(--shadow2)
}
button:hover{border-color:#cfd5e4}
.primary{background:var(--brand);border-color:var(--brand);color:white}
.primary:hover{background:var(--brand2);border-color:var(--brand2)}
#exportItems:hover{background:#15803d;border-color:#15803d}

.listHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.count{font-size:12px;color:var(--muted)}

.item{border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:#fff;    margin-top: 20px !important; margin-bottom: 25px !important;transition:background 0.3s ease;}
.item.disabled{opacity:0.4;pointer-events:none}
.item.checked{background:#eff6ff;border-color:#93c5fd}
.itemTop{display:flex;gap:10px;align-items:flex-start}
.itemTop input[type=checkbox]{width:18px;height:18px;margin-top:2px;accent-color:var(--brand)}

.itemMain{flex:1; position: relative;}
.itemTitle{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.itemTitle .id{font-family:var(--mono);font-size:12px;color: orangered; font-weight: bold; font-size: 15px}
.itemTitle .story{font-weight:700; font-size: 18px; color: navy;}
.chip{background:var(--chip);color:var(--chipText);border:1px solid #e0e7ff;border-radius:999px;padding:4px 8px;font-size:12px;
position: absolute;
right: 0;
top: 0;
}}



.desc b{color:#111827}
.muted{color:var(--muted)}

details{margin-top:10px}
summary{cursor:pointer;color:var(--brand);font-size:13px}

.suggest{margin-top:10px;border-left:3px solid #c7d2fe;background:#f4f6ff;padding:10px 12px;border-radius:12px}
.suggest .t{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.suggest .p{font-size:13px;line-height:1.5;margin:0}

.noteArea{width:100%;min-height:62px;margin-top:10px;border:1px solid var(--border);border-radius:12px;padding:10px;font-size:13px;outline:none}
.noteArea:focus{border-color:#c7d2fe;box-shadow:0 0 0 4px rgba(37,99,235,.10)}

.footer{margin-top:16px;color:var(--muted);font-size:12px}
.tiny{font-size:12px;color:var(--muted)}
.sep{height:1px;background:var(--border);margin:12px 0}