:root{
  --primary:#1F7A4D;
  --accent:#F2A900;
  --bg:#FAFAF7;
  --ink:#2B1F16;
  --muted:#5A3F2A;
  --card:#FFFFFF;
  --danger:#B23A3A;
  --border:#E7DFD3;
  --shadow: 0 10px 28px rgba(43,31,22,0.10);
  --radius: 18px;
  --max: 1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
}
a{color:var(--primary)}
a:hover{opacity:0.9}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--accent); color:var(--ink);
  padding:10px 12px; border-radius:12px; z-index:999;
}
.skip-link:focus{left:12px; top:12px}

.container{max-width:var(--max); margin:0 auto; padding:0 16px}

.header{
  position:sticky; top:0; z-index:20;
  background:rgba(250,250,247,0.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; gap:14px; align-items:center; justify-content:space-between; padding:14px 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; font-weight:900}
.mark{width:16px; height:16px; border-radius:6px; background:var(--primary); box-shadow: inset 0 0 0 3px rgba(242,169,0,0.55)}

.tabs{display:flex; flex-wrap:wrap; gap:8px}
.tab{
  appearance:none; border:1px solid var(--border); background:#fff;
  color:var(--muted); font-weight:800;
  padding:8px 10px; border-radius:999px; cursor:pointer;
}
.tab[aria-current="page"]{background:rgba(242,169,0,0.20); color:var(--ink); border-color:rgba(242,169,0,0.45)}
.tab:hover{border-color:rgba(31,122,77,0.35)}

.main{padding:18px 0 40px}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; box-shadow: 0 1px 0 rgba(43,31,22,0.06);
}
.grid{display:grid; gap:14px}
.grid-2{grid-template-columns: 1fr 1fr}
@media (max-width: 920px){.grid-2{grid-template-columns:1fr}}

.h1{font-size: clamp(22px, 3vw, 34px); margin: 0 0 8px}
.lead{margin:0 0 12px; color:var(--muted)}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:999px;
  border:1px solid var(--border); background:#fff; color:var(--ink);
  font-weight:900; cursor:pointer;
}
.btn.primary{background:var(--primary); color:#fff; border-color:rgba(31,122,77,0.65)}
.btn.danger{background:var(--danger); color:#fff; border-color:rgba(178,58,58,0.6)}
.btn:disabled{opacity:0.6; cursor:not-allowed}

.input, select{
  padding:10px 10px; border-radius:12px; border:1px solid var(--border);
  background:#fff; color:var(--ink);
}
label{font-weight:800}
.small{font-size:0.92rem; color:var(--muted)}
.notice{
  padding:12px 12px; border-radius:var(--radius);
  border:1px solid rgba(31,122,77,0.25);
  background: rgba(31,122,77,0.07);
}
.warn{
  border-color: rgba(242,169,0,0.45);
  background: rgba(242,169,0,0.15);
}
.error{
  border-color: rgba(178,58,58,0.45);
  background: rgba(178,58,58,0.08);
}

.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:var(--radius); background:#fff}
table{width:100%; border-collapse:collapse; min-width:880px}
th, td{padding:10px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top}
th{position:sticky; top:0; background:#fff; z-index:2}
td.num{text-align:right; white-space:nowrap}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(242,169,0,0.16); font-weight:900}
.badge.ok{background:rgba(31,122,77,0.12); border-color:rgba(31,122,77,0.25)}
.badge.err{background:rgba(178,58,58,0.10); border-color:rgba(178,58,58,0.25)}
.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding:2px 6px; border:1px solid var(--border); border-radius:8px; background:#fff}

.footer{border-top:1px solid var(--border); background:#fff; padding:16px 0}
.footer-inner{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
.foot-strong{font-weight:900}
.foot-small{font-size:0.92rem; color:var(--muted)}

:focus{outline: 3px solid rgba(242,169,0,0.55); outline-offset:2px}