/* memo.charleycoss.com */
:root {
  --p:#0d9488; --p-dk:#0f766e; --bg:#f8fafc; --card:#fff; --txt:#0f172a;
  --muted:#64748b; --border:#e5e7eb; --ok:#16a34a; --warn:#f59e0b; --err:#dc2626;
}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--txt); }
header { background:#fff; border-bottom:1px solid var(--border); padding:10px 18px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:10; }
.brand a { color:var(--p); font-weight:700; text-decoration:none; font-size:18px; }
nav { display:flex; gap:14px; align-items:center; flex:1; }
nav a { color:var(--txt); text-decoration:none; font-size:14px; padding:6px 10px; border-radius:5px; }
nav a:hover { background:#f1f5f9; }
nav .who { color:var(--muted); font-size:13px; }
nav .logout { color:#dc2626; }
.spacer { flex:1; }
main { max-width:1100px; margin:20px auto; padding:0 18px; }
h1, h2, h3 { color:var(--txt); }
h1 { font-size:24px; margin:14px 0 16px; }
h2 { font-size:18px; margin:18px 0 10px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:14px 18px; margin-bottom:14px; }
.flash { padding:10px 14px; border-radius:6px; margin-bottom:14px; font-size:14px; }
.flash-info { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }
.flash-success { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.flash-warn { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.flash-error { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local], select, textarea {
  width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:6px; font-size:14px; font-family:inherit;
}
textarea { min-height:120px; resize:vertical; }
label { display:block; font-weight:600; color:#334155; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; margin:10px 0 4px; }
button, .btn { display:inline-block; padding:9px 16px; background:var(--p); color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:14px; font-weight:600; text-decoration:none; }
button:hover, .btn:hover { background:var(--p-dk); }
.btn-sec { background:#fff; color:var(--txt); border:1px solid var(--border); }
.btn-sec:hover { background:#f1f5f9; }
.btn-danger { background:var(--err); }
.btn-sm { padding:5px 10px; font-size:12px; }
.row { display:flex; gap:14px; flex-wrap:wrap; }
.row > * { flex:1; min-width:200px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
table th { background:#f1f5f9; padding:8px 10px; text-align:left; font-size:11px; text-transform:uppercase; color:#475569; border-bottom:1px solid #cbd5e1; }
table td { padding:8px 10px; border-bottom:1px solid #f1f5f9; vertical-align:top; }
.muted { color:var(--muted); }
.pill { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; background:#e2e8f0; color:#334155; }
.pill-source { background:#dbeafe; color:#1e40af; }
.pill-source.email { background:#fce7f3; color:#9d174d; }
.pill-source.sms { background:#dcfce7; color:#166534; }
.pill-source.mms { background:#fef3c7; color:#92400e; }
.pill-source.web { background:#dbeafe; color:#1e40af; }
.pill-source.shortcut { background:#e9d5ff; color:#6b21b6; }
.action-due { background:#fee2e2; color:#991b1b; }
.action-soon { background:#fef3c7; color:#92400e; }
.action-future { background:#dcfce7; color:#166534; }
.action-done { background:#e2e8f0; color:#64748b; text-decoration:line-through; }
.memo-title { font-weight:600; color:var(--p); text-decoration:none; }
.memo-title:hover { text-decoration:underline; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.kpi { background:#fff; border:1px solid var(--border); border-radius:8px; padding:14px; text-align:center; }
.kpi .n { font-size:28px; font-weight:700; color:var(--p); }
.kpi .l { font-size:11px; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.recorder { background:#0f172a; color:#e2e8f0; padding:16px; border-radius:8px; }
.recorder .btn-rec { background:var(--err); color:#fff; }
.recorder .btn-rec.recording { background:#16a34a; animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
.recorder audio, .recorder video { width:100%; margin-top:8px; }
.attachments li { padding:6px 10px; background:#f1f5f9; border-radius:5px; margin:4px 0; display:flex; justify-content:space-between; align-items:center; }
.calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.calendar .cell { background:#fff; border:1px solid var(--border); border-radius:6px; padding:8px; min-height:100px; }
.calendar .cell.today { background:#fef3c7; border-color:var(--warn); }
.calendar .cell .d { font-size:12px; color:var(--muted); font-weight:600; }
.calendar .cell .m { font-size:11px; color:var(--txt); margin-top:3px; }
.calendar .cell .m a { display:block; padding:2px 4px; border-radius:3px; color:var(--p); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calendar .cell .m a:hover { background:#ede9fe; }
.login-box { max-width:360px; margin:60px auto; }
.login-box h1 { text-align:center; }
.actions { display:flex; gap:8px; margin:14px 0; flex-wrap:wrap; }