:root{--g:#1fa76f;--dark:#14251f;--bg:#f5f7f4;--line:#e4e9e5}*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;color:#15211d;background:var(--bg)}button{cursor:pointer;background:var(--g);color:white;border:0;border-radius:8px;padding:11px 15px}.login{min-height:100vh;display:grid;place-items:center;background:#13231e}.login form{width:min(380px,90vw);background:white;padding:36px;border-radius:18px;display:grid;gap:12px;text-align:center}.logo{margin:auto;background:var(--g);color:white;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:24px;font-weight:bold}.login h1{margin:5px 0}.login p,.card p,header p{color:#78837e;font-size:13px}.login input{padding:13px;border:1px solid var(--line);border-radius:8px}.login small{color:#c84242}main{display:grid;grid-template-columns:220px 1fr;min-height:100vh}aside{background:var(--dark);color:white;padding:28px 22px;display:flex;flex-direction:column}aside h2{font-size:16px}aside h2 i{background:var(--g);padding:9px;border-radius:9px;font-style:normal}nav{line-height:3.4;color:#91a39b;font-size:13px;margin-top:30px}aside button{margin-top:auto;background:#273b34}section{padding:38px 4vw;max-width:1300px;width:100%}header{display:flex;justify-content:space-between;align-items:start}header label{color:var(--g);font-size:10px;font-weight:bold;letter-spacing:.15em}header h1{font:500 34px Georgia;margin:8px 0}.connection{background:var(--dark);color:white;border-radius:12px;padding:17px 20px;margin:20px 0}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metrics article,.card{background:white;border:1px solid var(--line);border-radius:12px;padding:20px}.metrics span{font-size:11px;color:#78837e;display:block}.metrics b{font:500 27px Georgia;display:block;margin-top:9px}.columns{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:12px}.card h2{font:500 20px Georgia;margin:0 0 5px}.group{padding:13px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.group small{display:block;color:#78837e;margin-top:4px}.switch{width:40px;height:22px;border-radius:20px;background:#d8ddda;padding:3px}.switch.on{background:var(--g)}.switch:after{content:"";display:block;width:16px;height:16px;background:white;border-radius:50%}.switch.on:after{margin-left:18px}.qrbox{min-height:210px;display:grid;place-items:center}.qrbox img{width:210px;max-width:100%}.card button{margin:6px 4px 0 0}.danger{background:#b84c4c}.logs{margin-top:12px}.log{font-size:12px;padding:12px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between}.ok{color:var(--g)}@media(max-width:800px){main{grid-template-columns:1fr}aside{display:none}section{padding:25px 15px}.metrics{grid-template-columns:1fr 1fr}.columns{grid-template-columns:1fr}}

/* Tampilan mobile */
@media (max-width: 768px) {
  #app {
    display: block;
    min-height: 100vh;
  }

  #app[hidden] {
    display: none;
  }

  #app aside {
    width: auto;
    min-height: auto;
    padding: 18px;
  }

  #app aside nav {
    display: none;
  }

  #app aside > button {
    width: 100%;
    margin-top: 16px;
  }

  #app section {
    min-width: 0;
    padding: 18px;
  }

  #app section header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #app section header button {
    width: 100%;
  }

  .metrics,
  .columns {
    grid-template-columns: 1fr;
  }

  button {
    min-height: 44px;
    touch-action: manipulation;
  }
}