:root{
  --bg:#0f1420; --bg2:#161d2e; --bg3:#1d2639; --line:#263049;
  --txt:#e8edf7; --muted:#8b96b0; --acc:#4f8cff; --acc2:#7aa5ff;
  --ok:#34c77b; --warn:#ffb020; --danger:#ff5d5d;
  --card:#141b2c; --hover:#1c2440; --shadow:0 8px 30px rgba(0,0,0,.35);
  --radius:12px;
}
[data-theme="light"]{
  --bg:#f4f6fb; --bg2:#ffffff; --bg3:#eef1f8; --line:#dfe5f2;
  --txt:#1a2338; --muted:#5d6b8a; --acc:#2f6df6; --acc2:#2f6df6;
  --card:#ffffff; --hover:#eef2fb; --shadow:0 8px 24px rgba(30,50,100,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;}
#app{display:flex;height:100vh;height:100dvh;overflow:hidden}
.muted{color:var(--muted)} .spacer{flex:1}

/* ---------- sidebar ---------- */
#sidebar{width:290px;min-width:290px;background:var(--bg2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:14px;gap:10px;transition:margin-left .2s ease}
#sidebar.hide{margin-left:-300px}
.brand{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:800}
.brand-ico{font-size:24px}
#btn-collapse{margin-left:auto}
#btn-expand{position:fixed;left:8px;top:8px;z-index:50}
.side-label{font-size:11px;letter-spacing:.08em;color:var(--muted);margin-top:4px}
#inbox-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.inbox{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
  cursor:pointer;background:var(--card);transition:.15s}
.inbox:hover{background:var(--hover)}
.inbox.active{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.inbox .i-addr{font-weight:700;font-size:13px;word-break:break-all}
.inbox .i-sub{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;margin-top:4px}
.badge{background:var(--acc);color:#fff;font-size:11px;font-weight:700;border-radius:99px;
  padding:1px 8px;min-width:22px;text-align:center}
.badge.zero{background:var(--bg3);color:var(--muted)}
.inbox .i-ops{display:flex;gap:4px;margin-top:6px}
.side-foot{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.attr{font-size:12px;color:var(--muted);text-align:center}
.attr a{color:var(--acc2)}

/* ---------- main ---------- */
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#addrbar{display:flex;gap:12px;align-items:flex-end;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg2);flex-wrap:wrap}
.addr-label{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.addr-row{display:flex;align-items:center;gap:8px}
#addr-text{font-size:17px;font-weight:700;color:var(--acc2);word-break:break-all}
.addr-actions{display:flex;gap:8px;align-items:center}
#search{background:var(--bg3);border:1px solid var(--line);color:var(--txt);
  border-radius:99px;padding:8px 14px;width:230px;outline:none}
#search:focus{border-color:var(--acc)}

#quota-wrap{padding:8px 18px 0}
#quota-bar{height:6px;background:var(--bg3);border-radius:99px;overflow:hidden}
#quota-fill{height:100%;background:linear-gradient(90deg,var(--ok),var(--warn));width:0;transition:.4s}
#quota-text{font-size:11px;color:var(--muted);margin-top:2px}

#list-toolbar{display:flex;align-items:center;gap:10px;padding:8px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px}
#list-status{font-size:12px}

#view-list{flex:1;overflow-y:auto;padding:6px 12px 30px}
#msg-list{list-style:none;margin:0;padding:0}
.msg{display:flex;gap:10px;align-items:flex-start;padding:12px;border-bottom:1px solid var(--line);
  cursor:pointer;border-radius:8px}
.msg:hover{background:var(--hover)}
.msg.unread{background:rgba(79,140,255,.07)}
.msg.unread:hover{background:rgba(79,140,255,.12)}
.msg .dot{width:9px;height:9px;border-radius:99px;background:var(--acc);margin-top:6px;flex-shrink:0}
.msg.read .dot{background:transparent}
.msg .m-main{flex:1;min-width:0}
.msg .m-from{font-weight:700;font-size:13.5px}
.msg.unread .m-from{color:var(--acc2)}
.msg .m-subj{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg .m-intro{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg .m-time{font-size:12px;color:var(--muted);white-space:nowrap}
.msg .m-att{font-size:12px}
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.empty-ico{font-size:52px;margin-bottom:10px}
#btn-more{display:block;margin:14px auto}
#btn-more[hidden]{display:none}

/* ---------- message view ---------- */
#view-msg{flex:1;overflow-y:auto;padding:16px 22px 40px}
#btn-back{margin-bottom:10px}
#msg-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow)}
#msg-card h2{margin:0 0 12px;font-size:20px}
.m-meta{display:grid;gap:4px;font-size:13px;margin-bottom:12px}
.m-actions{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
#m-body{width:100%;height:60vh;border:1px solid var(--line);border-radius:8px;background:#fff}
.rawview{background:#0a0e18;color:#cfe3ff;font-size:12px;padding:14px;border-radius:8px;
  overflow:auto;max-height:50vh;white-space:pre-wrap;word-break:break-all;margin:0 0 12px}
[data-theme="light"] .rawview{background:#101828;color:#d7e3ff}

/* ---------- buttons ---------- */
button{font:inherit;color:var(--txt);cursor:pointer}
.btn-primary{background:var(--acc);border:none;color:#fff;font-weight:700;
  border-radius:var(--radius);padding:11px;width:100%;transition:.15s}
.btn-primary:hover{filter:brightness(1.12)}
.btn-ghost{background:var(--bg3);border:1px solid var(--line);border-radius:9px;padding:7px 12px}
.btn-ghost:hover:not(:disabled){border-color:var(--acc)}
.btn-ghost:disabled{opacity:.45;cursor:default}
.btn-ghost.danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger)}
.icon-btn{background:var(--bg3);border:1px solid var(--line);border-radius:9px;
  padding:6px 10px;font-size:15px}
.icon-btn:hover{border-color:var(--acc)}
#btn-refresh.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- modal / toast ---------- */
#modal-root:empty{display:none}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;
  align-items:center;justify-content:center;z-index:100;padding:16px}
.modal{background:var(--bg2);border:1px solid var(--line);border-radius:16px;
  padding:22px;width:440px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal h3{margin:0 0 14px}
.modal .frow{margin-bottom:12px}
.modal label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.modal input[type=text],.modal input[type=number],.modal select{
  width:100%;background:var(--bg3);border:1px solid var(--line);color:var(--txt);
  border-radius:9px;padding:9px 11px;font:inherit}
.modal input:focus,.modal select:focus{border-color:var(--acc);outline:none}
.addr-preview{background:var(--bg3);border:1px dashed var(--acc);border-radius:9px;
  padding:10px;text-align:center;font-weight:700;color:var(--acc2);word-break:break-all;margin:10px 0}
.mrow{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.setrow .lab b{display:block;font-size:13.5px}
.setrow .lab span{font-size:12px;color:var(--muted)}
.switch{position:relative;width:44px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.sl{position:absolute;inset:0;background:var(--bg3);border:1px solid var(--line);
  border-radius:99px;cursor:pointer;transition:.2s}
.sl:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;
  background:var(--muted);border-radius:99px;transition:.2s}
.switch input:checked + .sl{background:var(--acc)}
.switch input:checked + .sl:before{transform:translateX(20px);background:#fff}
#toast-root{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{background:var(--bg3);border:1px solid var(--acc);border-radius:10px;
  padding:10px 18px;box-shadow:var(--shadow);animation:tin .25s}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
.qr-box{text-align:center;padding:8px}
.qr-box canvas{border:8px solid #fff;border-radius:8px;image-rendering:pixelated}

#btn-menu{display:none}
#side-backdrop{display:none}

@media (max-width:760px){
  #app{height:100vh;height:100dvh}
  /* hamburger khusus HP */
  #btn-menu{display:inline-block;flex-shrink:0}
  #btn-expand{display:none !important}
  /* sidebar jadi drawer geser */
  #sidebar{position:fixed;left:0;top:0;bottom:0;z-index:90;width:min(300px,84vw);
    min-width:0;height:100vh;height:100dvh;transition:transform .22s ease;
    box-shadow:var(--shadow)}
  #sidebar.hide{transform:translateX(-105%);margin-left:0}
  #side-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80}
  #side-backdrop[hidden]{display:none}
  /* header lebih ringkas */
  #addrbar{padding:10px 12px;gap:8px;align-items:center}
  #addr-text{font-size:15px}
  .addr-actions{width:100%}
  #search{flex:1;width:auto;min-width:0}
  .icon-btn{padding:9px 12px} /* target sentuh lebih besar */
  /* toolbar */
  #list-toolbar{gap:6px;padding:8px 12px}
  #list-toolbar .btn-ghost{padding:9px 12px}
  #list-status{width:100%;order:9}
  /* daftar email */
  #view-list{padding:4px 8px 30px}
  .msg{padding:14px 10px}
  /* baca email */
  #view-msg{padding:12px 12px 40px}
  #msg-card{padding:14px}
  #msg-card h2{font-size:17px}
  .m-actions .btn-ghost{padding:10px 12px}
  #m-body{height:62vh;height:62dvh}
  /* modal & toast */
  .modal{padding:18px;margin:0 4px}
  #toast-root{left:12px;right:12px;transform:none;align-items:stretch}
  .toast{text-align:center}
}