:root{ --bg:#f6f7f9; --card:#fff; --text:#1e2a33; --muted:#667681;
  --primary:#608230; --primary-weak:#e7f2ff; --border:#e2e8f0; --danger:#e03131; --ok:#2f9e44; }
*{box-sizing:border-box}
body{margin:0; color:var(--text); background:var(--bg)}
.brand{font-weight:700}
.top-actions{margin-left:auto; display:flex; gap:8px}
.tabs{display:flex; gap:6px; padding:8px; background:#fff; border-bottom:1px solid var(--border)}
.tab{color:black; padding:8px 12px; border:none; font-size: 1rem; background:transparent; border-bottom:2px solid transparent; cursor:pointer}
.tab.active{border-color:var(--primary); color:var(--primary); font-weight:600}
.container{padding:4px; max-width:1100px; margin:0 auto}
.grid{display:grid; gap:12px}
@media(min-width:900px){ .grid.two{grid-template-columns: 2fr 3fr} }
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 4px}
.card h3{margin:0 0 8px 0; font-size:16px}
.btn{display:inline-flex; align-items:center; gap:6px; padding:9px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer}
.btn.primary{background:var(--primary); color:#fff; border-color:var(--primary)}
.btn.small{padding:6px 8px; font-size:12px}
.row{display:flex; gap:8px; flex-wrap:wrap}
.row > *{flex:1 1 160px}
label{display:block; font-size:12px; color:var(--muted); margin-bottom:4px}
input, select, textarea{width:100%; padding:10px; border:1px solid var(--border); border-radius:10px; background:#fff}
textarea{min-height:72px}
table{width:100%; border-collapse:separate; border-spacing:0 8px; font-size:14px}
thead th{color:var(--muted); font-weight:600; text-align:center; padding:6px 8px}
tbody tr{background:#fff}
tbody td{padding:8px 3px; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
tbody tr td:first-child{border-left:1px solid var(--border); border-top-left-radius:10px; border-bottom-left-radius:10px}
tbody tr td:last-child{border-right:1px solid var(--border); border-top-right-radius:10px; border-bottom-right-radius:10px}
.pill{padding:2px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted)}
.pill.ok{background:var(--ok); color:#fff; border:none}
.filterbar{display:flex; gap:6px; flex-wrap:wrap; padding:6px; background:#fff; border-bottom:1px solid var(--border)}
.filterbar > *{flex:1 1 140px}
.right{margin-left:auto}
.btn-edit, .btn-cancel, .btn-save{border: #999 solid 1px; border-radius: 4px; padding: .2rem .4rem;}
.btn.small, #btnPickLatLng, #btnMapCancel{border: #ccc solid 1px; border-radius: px; padding: .2rem .4rem; color:black;}
.tabs form {margin-left: auto; display: inline;}
.btn.danger {background: #b44;color: white;}
.kosin{padding:9px 28px;}
.logo {display: flex; align-items: center; gap: 6px; padding: 0; margin: 0; line-height: 1; font-size: 16px; height: 32px;}
.logo img {width: 50px; height: 50px; display: block;}
.logo a {font-family: "Segoe UI", "Helvetica Neue", "Arial", sans-serif;font-weight: 300;letter-spacing: 0.5px;}
.right {text-align: right;}
.header-container{padding:12px 12px 12px 0;}