:root{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;

  --accent:#63BE80;
  --accent-dark:#45a868;

  --danger:#dc2626;
  --good:#0f5132;

  --radius:10px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
a{color:#2563eb;text-decoration:none;}
a:hover{text-decoration:underline;}

header{background:#fff;border-bottom:1px solid var(--line);}
.wrap{max-width:95%;margin:0 auto;padding:14px 16px;}
.headerRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.logo{height:40px;width:auto;display:block;}
.brandTitle{margin:0;font-size:20px;line-height:1.2;}
.brandSub{font-size:13px;color:var(--muted);margin-top:4px;}
.headerTools{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.headerTools .who{color:var(--muted);font-size:13px;font-weight:700;white-space:nowrap;}
.headerTools a, .headerTools button{
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  padding:8px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  border:1px solid transparent;
  cursor:pointer;
}
.headerTools a:hover,.headerTools button:hover{background:var(--accent-dark);text-decoration:none;}

.container{max-width:1200px;margin:0 auto;padding:16px;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;}
.row{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.col{flex:1;}
.col-2{flex:2;}

hr{border:none;border-top:1px solid var(--line);margin:14px 0;}

input,select,textarea{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px;
  color:var(--text);
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(99,190,128,0.6);
  box-shadow:0 0 0 3px rgba(99,190,128,0.18);
}
textarea{min-height:120px;resize:vertical;}
label{display:block;margin:10px 0 6px;color:var(--muted);font-size:12px;font-weight:700;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--accent);
  border:1px solid transparent;
  color:white;
  padding:8px 12px;
  border-radius:8px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{background:var(--accent-dark);}
.btn.secondary{background:white;border:1px solid var(--line);color:var(--text);font-weight:900;}
.btn.secondary:hover{background:#f7f8fb;}
.btn.danger{background:white;border:1px solid var(--danger);color:var(--danger);font-weight:900;}
.btn.danger:hover{background:#fff5f5;}
.btn.small{padding:7px 10px;border-radius:8px;font-size:12px;}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 8px;border-radius:999px;font-size:12px;
  border:1px solid var(--line);color:var(--muted);font-weight:900;
  background:#fff;
}
.badge.good{border-color:rgba(99,190,128,0.55);color:var(--good);background:rgba(99,190,128,0.12);}
.badge.bad{border-color:rgba(107,114,128,0.45);color:var(--muted);background:rgba(107,114,128,0.10);}

.table{width:100%;border-collapse:collapse;}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;}
.table th{color:var(--muted);font-size:12px;font-weight:900;}
.table td{font-size:14px;}
.table td.actionsCell{text-align:right;white-space:nowrap;}
.clientNameCell{width:38%;}
.clientNameCell .nameLine{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;}
.clientNameCell .nameLine strong{white-space:nowrap;}
.clientNameCell .subLine{color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px;}

.kpi{display:flex;gap:10px;flex-wrap:wrap;}
.kpi .pill{
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 10px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  background:#fff;
}
.notice{
  padding:10px 12px;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--muted);font-size:13px;margin:10px 0;
}
.notice.ok{border-color:rgba(99,190,128,0.45);color:#0f5132;background:rgba(99,190,128,0.12);font-weight:900;}
.notice.err{border-color:rgba(220,38,38,0.35);color:var(--danger);background:rgba(220,38,38,0.08);font-weight:900;}

.footer{margin-top:16px;color:var(--muted);font-size:12px;}

.searchbar form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.searchbar form > div{flex:1;min-width:180px;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:840px){.split{grid-template-columns:1fr;}}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:18px;z-index:50;}
.modal{max-width:780px;width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;}
.modal .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;}
.modal .top h2{margin:0;font-size:16px;}
.modal .close{background:white;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:7px 10px;cursor:pointer;font-weight:900;}
.modal .close:hover{background:#f7f8fb;}
.show{display:flex;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;}

.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.clientActionsInline{display:flex;gap:8px;flex-wrap:nowrap;justify-content:flex-end;align-items:center;}
.clientActionsInline form{margin:0;}
.clientActionsInline .btn{white-space:nowrap;}


/* Header rows inside cards */
.hdr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hdr .actions{margin-left:auto;}


/* Client page: two-column layout */
.twoCol{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
@media (max-width: 760px){
  .twoCol{grid-template-columns:1fr;}
}
.groupHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px 0;}
.groupHead h3{margin:0;font-size:14px;}
.urlList{display:flex;flex-direction:column;gap:8px;}
.urlItem{padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff;}
.urlItem a{font-weight:600;text-decoration:none;word-break:break-word;}
.urlMeta{color:var(--muted);font-size:12px;margin-top:4px;}


.urlCard .urlItem a{font-size:13px;line-height:1.25;}
.urlCard .urlMeta{font-size:11px;}
.urlCard .urlItem{padding:9px;}
.urlCard .urlGroup{margin-bottom:12px;}


.rowItem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid var(--border);border-radius:14px;background:#fff;}
.rowActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}


/* Notes (client view) */
.noteList{display:flex;flex-direction:column;gap:12px;}
.noteItem{border:1px solid var(--border);border-radius:14px;background:#fff;padding:12px;}
.noteTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.noteDate{font-size:13px;color:#6b7280;white-space:nowrap;}
.noteActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.noteBody{display:block;}
.noteTitle{font-weight:800;font-size:16px;line-height:1.2;margin-bottom:6px;}
.noteText{color:#374151;line-height:1.45;word-break:break-word;}

.groupHr{border:0;border-top:1px solid var(--border);margin:8px 0 12px;}


/* Make notes + URL items stand out */
.noteItem{
  box-shadow: 0 6px 18px rgba(17,24,39,.06);
  border-color: rgba(15,23,42,.10);
}
.noteItem + .noteItem{margin-top:0;} /* gap handled by noteList */

.urlGroupHdr{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding-bottom:8px;
  margin:18px 0 10px;
  border-bottom:1px solid var(--border);
}
.urlGroupHdr .month{font-weight:800;font-size:15px;}
.urlGroupHdr .count{color:#6b7280;font-weight:700;}

.urlItem{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  box-shadow: 0 6px 18px rgba(17,24,39,.05);
}
.urlItem + .urlItem{margin-top:10px;}
.urlItem a{font-weight:700;display:block;word-break:break-word;}
.urlItem .meta{margin-top:4px;color:#6b7280;font-size:12.5px;}


/* v19: flatter cards + light grey backgrounds for lists */
.noteItem, .urlItem{
  box-shadow:none !important;
  background:#f3f4f6 !important;
  border-color: rgba(15,23,42,.12) !important;
}