:root{
  --green:#046a34; --green-d:#053d24; --emerald:#0a8a45;
  --ink:#1e2a24; --muted:#5f6f68; --line:#e2ece7; --bg:#f4f8f6;
  --amber:#b9770a; --red:#b0281f; --card:#fff; --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.hidden{display:none!important}
.brand-badge{display:inline-flex;align-items:center;background:#fff;color:var(--green);font-weight:700;font-size:22px;padding:6px 12px;border-radius:8px;letter-spacing:.02em}
.brand-badge span{color:#c0392b;margin-left:2px}
.brand-badge.sm{font-size:16px;padding:4px 9px}
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 16px;border-radius:9px;font-size:14px;cursor:pointer;font-weight:600;transition:.15s}
.btn:hover{background:#f0f6f2}
.btn-primary{background:var(--green);color:#fff;border-color:var(--green)}
.btn-primary:hover{background:var(--green-d)}
.btn-approve{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.btn-approve:hover{background:var(--green)}
.btn-reject{background:#fff;color:var(--red);border-color:#ecccc9}
.btn-reject:hover{background:#fbeeed}
.btn-ghost{background:transparent;border-color:transparent;color:#eafff2}
.topbar .btn-ghost{color:#eafff2}
.btn-ghost:hover{background:rgba(255,255,255,.14)}

/* login */
.login-wrap{min-height:100vh;min-height:100dvh;display:flex;padding:24px 18px;overflow-y:auto;background:linear-gradient(135deg,#0a6e3e,#053d24)}
.login-card{margin:auto;background:#fff;border-radius:16px;padding:30px 26px 24px;width:100%;max-width:376px;box-shadow:0 20px 50px rgba(0,40,20,.3);text-align:center}
.login-logo{display:block;margin:2px auto 18px;height:46px;width:auto;max-width:80%}
.login-card .brand-badge{margin:0 auto 16px;background:#eef6f1}
.login-card h1{margin:0 0 20px;font-size:22px;font-weight:700;color:var(--green-d)}
.login-card .sub{color:var(--muted);font-size:13.5px;margin:4px 0 20px}
.login-card label{display:block;text-align:left;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.login-card input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;outline:none}
.login-card input:focus{border-color:var(--green)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;border-radius:8px;color:var(--muted);cursor:pointer}
.pw-toggle:hover{background:#f0f6f2}
.pw-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pw-toggle .slash{opacity:0}
.pw-toggle.on{color:var(--green)}
.pw-toggle.on .slash{opacity:1}
.login-card .btn{width:100%;margin-top:16px;justify-content:center}
.login-card .note{display:flex;align-items:flex-start;gap:8px;text-align:left;font-size:11px;color:var(--muted);margin:18px 0 0;line-height:1.5;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.login-card .note .lock{width:15px;height:15px;flex:none;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.err{color:var(--red);font-size:13px;margin-top:10px;min-height:18px}

/* app */
.topbar{background:linear-gradient(135deg,#0a6e3e,#053d24);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;box-shadow:0 2px 12px rgba(0,40,20,.2)}
.tb-left{display:flex;align-items:center;gap:12px;font-size:16px;min-width:0}
.tb-left b{white-space:nowrap}
.hdr-logo{height:30px;width:auto;display:block;flex:none}
.tb-right{display:flex;gap:8px;flex:none}
.tb-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);padding:8px 14px;border-radius:9px;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .15s,transform .1s}
.tb-btn:hover{background:rgba(255,255,255,.2)}
.tb-btn:active{background:rgba(255,255,255,.3);transform:translateY(1px)}
.tb-btn .ic{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{max-width:1000px;margin:0 auto;padding:22px 18px 60px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.card{background:var(--card);border:1px solid var(--line);border-left-width:5px;border-radius:14px;padding:16px 18px;min-height:84px;display:flex;flex-direction:row;align-items:center;gap:14px;box-shadow:0 2px 12px rgba(0,40,20,.06)}
.card-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.card-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.card .lbl{font-size:13px;color:var(--muted);font-weight:600}
.card .num{font-size:30px;font-weight:700;line-height:1}
.card.pending{border-left-color:var(--amber)} .card.pending .num{color:var(--amber)} .card.pending .card-ic{background:#fbf0da;color:var(--amber)}
.card.approved{border-left-color:var(--emerald)} .card.approved .num{color:var(--emerald)} .card.approved .card-ic{background:#e2f3e9;color:var(--emerald)}
.card.rejected{border-left-color:var(--red)} .card.rejected .num{color:var(--red)} .card.rejected .card-ic{background:#fbeeed;color:var(--red)}

.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:#fff;color:var(--muted);padding:8px 15px;border-radius:20px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s}
.tab:hover{background:#f0f6f2;color:var(--green-d);border-color:#cfe6d9}
.tab.on{background:var(--green);color:#fff;border-color:var(--green)}
.tab.on:hover{background:var(--green-d);color:#fff;border-color:var(--green-d)}
.search-wrap{position:relative;flex:1;min-width:200px;max-width:340px}
.search-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke .15s}
.search{width:100%;padding:9px 14px 9px 37px;border:1.5px solid var(--line);border-radius:20px;font-size:14px;outline:none}
.search:focus{border-color:var(--green)}
.search-wrap:focus-within .search-ic{stroke:var(--green)}

.banner{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.banner.error{background:#fbeeed;color:var(--red);border:1px solid #ecccc9}
.banner.info{background:#eef6f1;color:var(--green-d);border:1px solid #cfe6d9}

.list{display:flex;flex-direction:column;gap:10px}
.row{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.row .main{min-width:0}
.row .prod{font-weight:700;font-size:15px;color:var(--green-d)}
.row .sit{font-size:13.5px;color:var(--ink);margin:3px 0}
.row .sum{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:520px}
.row .meta{font-size:12px;color:var(--muted);margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;text-transform:capitalize}
.pill.pending{background:#fbf0da;color:var(--amber)} .pill.approved{background:#e2f3e9;color:var(--emerald)} .pill.rejected{background:#fbeeed;color:var(--red)}
.row .act{flex:none}
.empty{text-align:center;color:var(--muted);padding:48px 20px;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:12px}
.empty-ic{width:46px;height:46px;fill:none;stroke:#bcd3c7;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.empty p{margin:0}
@media (max-width:640px){ .cards{grid-template-columns:1fr} .wrap{padding:18px 14px 60px} }
@media (max-width:460px){ .tb-btn span{display:none} .tb-btn{padding:8px 10px} }

.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
table.audit{width:100%;border-collapse:collapse;font-size:13px}
table.audit th,table.audit td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.audit th{background:#f0f6f2;color:var(--muted);font-size:12px;position:sticky;top:0}
table.audit td.act b{text-transform:uppercase;font-size:11px;padding:2px 8px;border-radius:6px;background:#eef6f1;color:var(--green-d)}
table.audit td.det{max-width:360px;color:var(--muted);word-break:break-word}

/* modal */
.modal-wrap{position:fixed;inset:0;background:rgba(6,30,18,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal{background:#fff;border-radius:14px;width:100%;max-width:600px;max-height:90vh;overflow:auto;box-shadow:0 24px 60px rgba(0,40,20,.35)}
.modal.sm{max-width:420px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.modal-head h2{margin:0;font-size:17px;color:var(--green-d)}
.modal-head .x{border:0;background:#f0f6f2;width:30px;height:30px;border-radius:8px;font-size:18px;cursor:pointer;color:var(--muted)}
.modal-body{padding:18px}
.field{margin-bottom:14px}
.field .k{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.field .v{font-size:14.5px;line-height:1.5}
.raw{background:#f4f8f6;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.raw.ro::after{content:" (read-only)";color:var(--muted);font-size:11px}
textarea.approved{width:100%;min-height:90px;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;font-family:inherit;line-height:1.5;outline:none;resize:vertical}
textarea.approved:focus{border-color:var(--green)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
#cfOk{background:var(--red);color:#fff;border-color:var(--red)}
#cfOk.safe{background:var(--emerald);border-color:var(--emerald)}
#cfExtra textarea{width:100%;min-height:70px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;margin-top:8px}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--green-d);color:#fff;padding:12px 20px;border-radius:10px;font-size:14px;box-shadow:0 12px 30px rgba(0,40,20,.35);z-index:60}
.toast.err{background:var(--red)}

@media(max-width:640px){
  .cards{grid-template-columns:1fr}
  .row{flex-direction:column}
  .row .act{align-self:stretch}
  .row .act .btn{width:100%}
}