:root { --bg:#f4f3ee; --card:#fff; --text:#1f1f1d; --muted:#5f5e5a; --border:#d3d1c7; --accent:#185FA5; --danger:#a32d2d; --ok:#27500A; --warn:#854F0B; }
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Segoe UI",system-ui,sans-serif; font-size:15px; line-height:1.5 }
header { display:flex; align-items:center; gap:16px; padding:10px 24px; background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5 }
header h1 { font-size:20px; margin:0 }
#topnav { display:flex; gap:6px }
.spacer { flex:1 }
.muted { color:var(--muted) } .error { color:var(--danger) } .ok { color:var(--ok) } .bad { color:var(--danger) } .warn { color:var(--warn); font-weight:600 }
button { font:inherit; padding:7px 14px; border-radius:8px; border:1px solid var(--border); background:var(--card); cursor:pointer }
button.primary, form button[type=submit] { background:var(--accent); color:#fff; border-color:var(--accent) }
button.danger { color:var(--danger) } button.small { padding:4px 8px; font-size:13px }
button.active { background:var(--accent); color:#fff; border-color:var(--accent) }
input, select, textarea { font:inherit; padding:7px; border:1px solid var(--border); border-radius:8px; width:100% }
input[type=checkbox] { width:auto; transform:scale(1.3); margin:8px } input[type=file] { border:0; padding:0 }
textarea.mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px }
main { padding:16px 24px; max-width:1200px }
.view { display:none } .view.active { display:block }
.tab { display:none } .tab.active { display:block }
nav#tabs { display:flex; gap:6px; margin:0 0 12px; flex-wrap:wrap }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 20px; margin-bottom:16px }
.card.narrow { max-width:420px; margin:48px auto }
.card h2 { margin:0 0 8px; font-size:17px; display:flex; align-items:center; gap:10px } .card h3 { font-size:15px; margin:16px 0 6px }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px }
.grid label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted) }
.grid .wide { grid-column:1 / -1 }
.row { display:flex; gap:8px; align-items:center } .row.wrap { flex-wrap:wrap }
.actions { display:flex; gap:8px; align-items:center }
table { width:100%; border-collapse:collapse; font-size:14px }
th, td { text-align:left; padding:7px 6px; border-bottom:1px solid var(--border); vertical-align:middle }
th { color:var(--muted); font-weight:600; font-size:12px }
table.kv td:first-child { color:var(--muted); width:220px }
td .btns { display:flex; gap:4px; flex-wrap:wrap }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#b4b2a9; margin-right:6px } .dot.on { background:#3B6D11 }
.tag { font-size:12px; padding:2px 8px; border-radius:6px; border:1px solid var(--border); white-space:nowrap }
.agenda-day h3 { color:var(--muted); margin:12px 0 4px }
.agenda-item { display:flex; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--border) }
.agenda-item .body { flex:1 } .agenda-item.done .body { text-decoration:line-through; color:var(--muted) }
pre { background:var(--bg); padding:10px; border-radius:8px; overflow:auto; font-size:13px; user-select:all }
code { background:var(--bg); padding:2px 6px; border-radius:4px }
tr.clickable { cursor:pointer } tr.clickable:hover { background:var(--bg) }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--text); color:#fff; padding:10px 18px; border-radius:10px; display:none; z-index:10 }
.toast.show { display:block }
#act-items td { vertical-align: top }
#act-items input[type=text] { min-width: 110px }
.thumb { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: #fff; vertical-align: middle; margin-right: 6px }
.rec.on { background: #FCEBEB; color: #791F1F; border-color: #E24B4A }
.mini { font-size: 12px; color: var(--muted) }