:root { --g: #1b7f4b; --gd: #0f5c34; --gs: #e7f5ed; --bg: #f4f7f5; --tx: #1d2a22; --mu: #66756c; --bd: #dbe6df; --red: #b71c1c; --amb: #8d6e00; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", sans-serif; color: var(--tx); background: var(--bg); }
button, input, select, textarea { font: inherit; }
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--gd); color: #fff; padding: 16px 10px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.brand { font-weight: 800; font-size: 16px; padding: 4px 10px 14px; }
.brand small { display: block; font-weight: 500; opacity: .75; font-size: 12px; }
.side a { display: block; color: #e8f5ee; text-decoration: none; padding: 8px 12px; border-radius: 8px; margin: 2px 0; }
.side a.on, .side a:hover { background: rgba(255,255,255,.14); color: #fff; }
.who { margin-top: 18px; padding: 10px 12px; font-size: 12px; opacity: .9; border-top: 1px solid rgba(255,255,255,.2); }
.main { padding: 22px 28px; min-width: 0; }
h1 { font-size: 22px; margin: 0 0 14px; }
h2 { font-size: 16px; margin: 18px 0 8px; }
.card { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.stat { font-size: 30px; font-weight: 800; color: var(--g); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
label { display: block; font-weight: 600; font-size: 12px; color: var(--mu); margin: 8px 0 3px; }
input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--bd); border-radius: 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--g); border-color: var(--g); }
.btn { background: var(--g); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 700; cursor: pointer; }
.btn:hover { background: var(--gd); } .btn[disabled] { opacity: .5; cursor: default; }
.btn.sec { background: #fff; color: var(--g); border: 1px solid var(--g); }
.btn.warn { background: var(--red); } .btn.sm { padding: 4px 10px; font-size: 12px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th { text-align: left; font-size: 12px; color: var(--mu); font-weight: 700; border-bottom: 2px solid var(--bd); padding: 8px; position: sticky; top: 0; background: #fff; }
td { border-bottom: 1px solid #eef3f0; padding: 7px 8px; vertical-align: top; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--gs); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef3f0; }
.pill.ok, .pill.normal { background: #e3f4e8; color: #1b5e20; } .pill.warn, .pill.borderline, .pill.processing { background: #fff4d6; color: var(--amb); }
.pill.bad, .pill.abnormal { background: #fdecea; color: var(--red); } .pill.critical { background: var(--red); color: #fff; }
.err { color: var(--red); font-weight: 600; margin: 6px 0; white-space: pre-wrap; } .ok { color: var(--g); font-weight: 600; margin: 6px 0; }
.muted { color: var(--mu); font-size: 12px; }
.drop { border: 2px dashed #9cc7ae; border-radius: 12px; padding: 28px; text-align: center; background: #fbfefc; color: var(--mu); cursor: pointer; }
.drop.over { background: var(--gs); border-color: var(--g); color: var(--gd); }
iframe.pdf { width: 100%; height: 78vh; border: 1px solid var(--bd); border-radius: 8px; background: #fff; }
.login { max-width: 400px; margin: 10vh auto; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 14px; }
.grp { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--gd); margin: 12px 0 2px; grid-column: 1 / -1; text-transform: uppercase; }
.fielderr { border-color: var(--red) !important; background: #fff7f6; }
.score { border: 1px solid var(--bd); border-radius: 8px; padding: 8px; margin: 6px 0; background: #fafcfb; }
.keyimg { max-width: 100%; border: 1px solid var(--bd); border-radius: 6px; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; } .tabs button { background: #fff; border: 1px solid var(--bd); border-radius: 8px; padding: 6px 12px; cursor: pointer; } .tabs button.on { background: var(--g); color: #fff; border-color: var(--g); }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .side { position: static; height: auto; } .split { grid-template-columns: 1fr; } }