:root {
  --bg:#f4f5f2; --card:#fff; --ink:#172019; --muted:#667067;
  --line:#dfe4de; --green:#215b3a; --green2:#2f7950; --red:#a73333;
  --orange:#c66d20; --purple:#633c83; --shadow:0 8px 25px rgba(20,35,25,.08);
}
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif; color:var(--ink); background:var(--bg); }
a { color:inherit; text-decoration:none; }
button,.button,input,select,textarea { font:inherit; }
button,.button { border:1px solid var(--line); border-radius:11px; padding:.78rem 1rem; background:#fff; cursor:pointer; font-weight:700; text-align:center; }
button:hover,.button:hover { transform:translateY(-1px); }
.primary { background:var(--green); color:#fff; border-color:var(--green); }
.success { background:var(--green2); color:white; border-color:var(--green2); }
.danger { color:white; background:var(--red); border-color:var(--red); }
.warning { color:white; background:var(--orange); border-color:var(--orange); }
.topbar { min-height:68px; background:#173c29; color:white; display:flex; align-items:center; gap:2rem; padding:.7rem max(1rem,calc((100vw - 1200px)/2)); position:sticky; top:0; z-index:10; box-shadow:0 3px 15px rgba(0,0,0,.15); }
.brand { font-weight:900; letter-spacing:.08em; font-size:1.15rem; }
.topbar nav { display:flex; gap:.35rem; flex:1; }
.topbar nav a { padding:.65rem .8rem; border-radius:9px; }
.topbar nav a:hover { background:rgba(255,255,255,.11); }
.report-link { color:#ffd7a8; }
.userbox { display:flex; align-items:center; gap:.8rem; font-size:.9rem; }
.userbox a { opacity:.8; text-decoration:underline; }
.badge { display:inline-grid; place-items:center; min-width:20px; height:20px; border-radius:10px; background:#e34646; margin-left:2px; font-size:.72rem; }
.container { width:min(1200px,calc(100% - 2rem)); margin:2rem auto 6rem; }
.page-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.5rem; }
h1 { margin:.15rem 0; font-size:clamp(1.8rem,5vw,2.7rem); line-height:1.08; }
h2 { margin:.2rem 0 1rem; }
p { line-height:1.55; }
.page-head p,.muted { color:var(--muted); margin:.3rem 0; }
.flash { padding:1rem; border-radius:10px; margin-bottom:1rem; background:white; border-left:5px solid var(--green); }
.flash.error { border-color:var(--red); }
.attention { background:#f0eafa; border:1px solid #d9caec; padding:1.2rem; border-radius:16px; margin-bottom:2rem; }
.attention-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.attention-card { background:white; border-radius:12px; padding:1rem; display:flex; gap:.8rem; align-items:center; box-shadow:var(--shadow); }
.attention-card strong { font-size:2rem; color:var(--purple); }
.section-title { display:flex; justify-content:space-between; align-items:center; margin-top:2rem; }
.task-list { display:grid; gap:.7rem; }
.task-card { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:.8rem; background:var(--card); border:1px solid var(--line); border-left:6px solid #aaa; border-radius:14px; padding:1rem; box-shadow:0 3px 12px rgba(20,35,25,.04); }
.task-card:hover { box-shadow:var(--shadow); transform:translateY(-1px); }
.priority-critical { border-left-color:#7e39a0 !important; }
.priority-must { border-left-color:#d23636 !important; }
.priority-should { border-left-color:#e58826 !important; }
.priority-could { border-left-color:#3b9a5d !important; }
.priority-icon { font-size:1.5rem; text-align:center; }
.task-main strong { font-size:1.08rem; }
.task-meta { display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin-top:.35rem; color:var(--muted); font-size:.88rem; }
.status-pill { white-space:nowrap; padding:.4rem .65rem; border-radius:999px; background:#edf0ed; font-size:.78rem; font-weight:800; }
.status-awaiting_approval { background:#eee4f7; color:#623b82; }
.status-in_progress { background:#fff0d8; color:#7b4b0c; }
.status-approved { background:#dcf2e3; color:#205e36; }
.empty { padding:2rem; text-align:center; color:var(--muted); background:#fff; border:1px dashed #cdd3cd; border-radius:14px; }
.empty.compact { padding:1rem; }
.report-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.report-card { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 3px 12px rgba(0,0,0,.04); }
.report-card img { width:100%; height:150px; object-fit:cover; }
.report-card div { padding:1rem; display:grid; gap:.3rem; }
.report-card span,.report-card small { color:var(--muted); }
.narrow { width:min(700px,100%); margin:auto; }
.form-card,.login-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:clamp(1rem,4vw,1.6rem); box-shadow:var(--shadow); }
.login-card { width:min(430px,100%); margin:7vh auto; }
.stack { display:grid; gap:1rem; }
label { display:grid; gap:.4rem; font-weight:700; }
input,select,textarea { width:100%; border:1px solid #cbd2cb; border-radius:10px; padding:.82rem; background:#fff; color:var(--ink); }
textarea { resize:vertical; }
label small { color:var(--muted); font-weight:400; }
fieldset { border:0; padding:0; margin:0; }
legend { font-weight:800; margin-bottom:.5rem; }
.priority-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.priority-choice { display:block; border:1px solid var(--line); border-left:5px solid #aaa; border-radius:10px; padding:.8rem; cursor:pointer; }
.priority-choice input { width:auto; margin-right:.4rem; }
.two-cols { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.demo-box { margin-top:1rem; padding:1rem; border-radius:10px; background:#f1f3f0; color:var(--muted); font-size:.86rem; }
.detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; background:#fff; border:1px solid var(--line); border-left:7px solid #aaa; border-radius:16px; padding:1.4rem; margin-bottom:1rem; }
.eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:900; color:var(--muted); }
.detail-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:1rem; align-items:start; }
.description { white-space:pre-wrap; }
dl { display:grid; grid-template-columns:140px 1fr; gap:.45rem 1rem; border-top:1px solid var(--line); padding-top:1rem; }
dt { color:var(--muted); }
dd { margin:0; font-weight:700; }
.action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin-top:1rem; }
.action-grid form,.action-grid button { width:100%; }
.comment { border-top:1px solid var(--line); padding:.8rem 0; }
.comment:first-child { border-top:0; }
.comment small { display:block; color:var(--muted); }
.comment p { margin:.4rem 0; }
.report-photo { width:100%; max-height:500px; object-fit:contain; background:#eee; border-radius:12px; }
.filters { display:flex; gap:.7rem; margin-bottom:1rem; }
.filters select { width:auto; min-width:170px; }
.notification-list,.simple-list { display:grid; gap:.6rem; }
.notification,.simple-list>div { display:flex; justify-content:space-between; gap:1rem; padding:1rem; background:#fff; border:1px solid var(--line); border-radius:11px; }
.notification.unread { border-left:5px solid var(--purple); }
.notification small,.simple-list span { color:var(--muted); }
.mobile-nav { display:none; }

@media(max-width:760px) {
  .topbar { min-height:56px; justify-content:space-between; }
  .topbar nav,.userbox span { display:none; }
  .container { width:min(100% - 1rem,1200px); margin-top:1rem; }
  .page-head { align-items:flex-start; }
  .page-head>.button { display:none; }
  .task-card { grid-template-columns:34px 1fr; padding:.85rem; }
  .task-card .status-pill { grid-column:2; justify-self:start; }
  .detail-grid { grid-template-columns:1fr; }
  .detail-head { display:grid; }
  .priority-options { grid-template-columns:1fr; }
  .two-cols { grid-template-columns:1fr 1fr; }
  .attention-grid { grid-template-columns:1fr; }
  .action-grid { grid-template-columns:1fr; }
  .filters { display:grid; grid-template-columns:1fr 1fr; }
  .filters select { width:100%; min-width:0; }
  .mobile-nav { position:fixed; z-index:20; bottom:0; left:0; right:0; display:flex; justify-content:space-around; background:#173c29; color:#fff; padding:.45rem .25rem calc(.45rem + env(safe-area-inset-bottom)); box-shadow:0 -4px 14px rgba(0,0,0,.18); }
  .mobile-nav a { display:grid; place-items:center; gap:.1rem; font-size:1.2rem; min-width:65px; }
  .mobile-nav span { font-size:.68rem; }
}

.form-section { border:1px solid var(--line); border-radius:12px; padding:1rem; display:grid; gap:1rem; background:#f8faf7; }
.form-section h2 { margin:0; font-size:1.1rem; }
.hint { margin:-.35rem 0 .2rem; color:var(--muted); font-size:.85rem; }