#app{display:none;flex-direction:column;height:100vh}
header{background:var(--forest-m);padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:64px;flex-shrink:0;gap:16px;border-bottom:1px solid var(--bd)}
.header-brand{display:flex;align-items:center;gap:12px}
.header-seal{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}
.header-seal img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.logo{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;letter-spacing:.1em;color:var(--gold)}
.logo em{color:var(--gold);font-style:italic;font-weight:500}

/* ==================== Header right side — protocol + account ==================== */
.header-right{display:flex;align-items:center;gap:10px;position:relative}
.hdr-btn{background:rgba(13,36,22,.5);border:1px solid rgba(201,168,76,.25);color:var(--gold-l);padding:7px 12px;font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.04em;cursor:pointer;border-radius:6px;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.hdr-btn:hover{border-color:var(--gold);background:rgba(201,168,76,.12);color:var(--gold)}
.hdr-btn svg{width:16px;height:16px;flex-shrink:0}
.hdr-btn-icon{width:34px;height:34px;padding:0;justify-content:center}

/* Account dropdown */
#acct-btn{min-width:40px}
#acct-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:280px;max-width:320px;background:rgba(13,36,22,.97);border:1px solid var(--bd);border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);padding:16px;display:none;flex-direction:column;gap:12px;z-index:900;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#acct-dropdown.on{display:flex}
.acct-row{display:flex;flex-direction:column;gap:3px}
.acct-row-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--soft);font-weight:500}
.acct-row-value{font-size:14px;color:var(--gold-l);font-weight:500}
.acct-divider{height:1px;background:var(--bd);margin:2px 0}
.acct-btn{width:100%;padding:9px 12px;border:1px solid var(--bd);border-radius:6px;font-family:'Jost',sans-serif;font-size:13px;cursor:pointer;background:none;color:var(--gold-l);text-align:left;transition:all .15s;display:flex;align-items:center;gap:8px}
.acct-btn:hover{border-color:var(--gold);background:rgba(201,168,76,.08);color:var(--gold)}
.acct-btn-danger{color:rgba(232,213,160,.7)}
.acct-btn-danger:hover{border-color:var(--jewel);background:rgba(224,112,80,.08);color:var(--jewel)}
.acct-btn-primary{background:var(--gold-d);border-color:var(--gold-d);color:var(--forest);justify-content:center;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.acct-btn-primary:hover{background:var(--gold);color:var(--forest)}
.acct-edit-field{display:flex;flex-direction:column;gap:4px}
.acct-edit-field label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--soft)}
.acct-edit-field input,.acct-edit-field select{width:100%;padding:8px 10px;background:rgba(13,36,22,.6);border:1px solid var(--bd);border-radius:5px;color:var(--ink);font-family:'Jost',sans-serif;font-size:14px;outline:none;color-scheme:dark}
.acct-edit-field input:focus,.acct-edit-field select:focus{border-color:var(--gold)}
.acct-edit-field select option{background:#0a1c11;color:var(--gold-l)}
.acct-edit-checkrow{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);margin:2px 0}
.acct-edit-checkrow input{accent-color:var(--gold);width:15px;height:15px;cursor:pointer}
.acct-edit-btn-row{display:flex;gap:8px}
.acct-edit-btn-row button{flex:1}

/* ==================== Header stats tiles ==================== */
/* Every tile stacks the big number on top and the label below, so the four
   tiles align as a clean row. strong is block, span is a separate line. */
.hstats{display:flex;gap:24px;font-size:13px;letter-spacing:.06em;color:var(--soft);text-transform:uppercase;align-items:flex-start}
.hstats>div{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.hstats strong{color:var(--gold);font-size:20px;letter-spacing:0;font-weight:600}
.hstats span{display:block;font-size:11px;letter-spacing:.08em}
.hbtn{background:none;border:1px solid var(--bd);color:var(--gold-l);padding:7px 16px;font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.06em;cursor:pointer;border-radius:4px;text-transform:uppercase;transition:all .2s}
.hbtn:hover{background:var(--gold-glow);border-color:var(--gold)}
.body{display:flex;flex:1;overflow:hidden}
.sidebar{width:33.333%;flex-shrink:0;background:rgba(18,45,28,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow:hidden;transition:width .3s,opacity .3s}
.sidebar.collapsed{width:0;opacity:0;pointer-events:none}
.tabs{display:flex;border-bottom:1px solid var(--bd);flex-shrink:0;background:rgba(18,45,28,.75)}
.tab{flex:1;padding:16px 8px;font-family:'Jost',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.1em;background:none;border:none;cursor:pointer;color:var(--soft);transition:all .2s;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--gold);font-weight:500;border-bottom-color:var(--gold)}
.panel{display:none;flex-direction:column;flex:1;overflow:hidden;min-height:0}
.panel.on{display:flex}
.frow{padding:14px 20px;border-bottom:1px solid var(--bd);flex-shrink:0;background:rgba(18,45,28,.18)}
.frow-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--soft);margin-bottom:9px;font-weight:500}
.rsel{padding:10px 20px;border-bottom:1px solid var(--bd);flex-shrink:0;background:rgba(18,45,28,.18)}
.rsel select{width:100%;padding:10px 12px;border:1px solid var(--bd);border-radius:6px;font-family:'Jost',sans-serif;font-size:15px;background:rgba(13,36,22,.3);outline:none;cursor:pointer;color:var(--ink);appearance:none;-webkit-appearance:none}
.rsel select option{background:#1A3D28;color:var(--ink-d)}
.srow{padding:10px 20px;border-bottom:1px solid var(--bd);flex-shrink:0;background:rgba(18,45,28,.18)}
.sinput{width:100%;padding:10px 13px;border:1.5px solid var(--bd);border-radius:6px;font-family:'Jost',sans-serif;font-size:15px;outline:none;background:rgba(13,36,22,.25);color:var(--ink-d);caret-color:var(--gold)}
.sinput::placeholder{color:var(--soft-d)}
.sinput:focus{border-color:var(--gold)}
.llist{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0}
.llist::-webkit-scrollbar{width:3px}
.llist::-webkit-scrollbar-thumb{background:var(--bd)}
.mwrap{position:relative;flex:1;display:flex;flex-direction:column}
#map{flex:1;position:relative}
.mobile-inner-stats{display:none;padding:5px 11px;font-size:11px;color:rgba(232,213,160,.65);gap:5px;align-items:center;background:rgba(8,22,13,.6);border-bottom:1px solid rgba(201,168,76,.1);flex-shrink:0}
.mobile-inner-stats strong{font-weight:600;color:#E8D5A0;font-size:12px}
.mobile-inner-stats .ms-sep{color:rgba(201,168,76,.35);margin:0 1px}
.mobile-stats-bar{display:none;background:rgba(10,28,17,.92);border-bottom:1px solid rgba(201,168,76,.15);padding:5px 12px;font-size:11px;color:rgba(232,213,160,.65);gap:5px;align-items:center;white-space:nowrap;overflow:hidden;flex-shrink:0}
.mobile-stats-bar #ms-total,.mobile-stats-bar #ms-cleared,.mobile-stats-bar #ms-pct{font-weight:600;color:#E8D5A0;font-size:12px}
.ms-sep{color:rgba(201,168,76,.35);margin:0 1px}
#pg-row-s,#pg-row-gp{display:flex}

/* Log tab scope toggle (All / My Clearings) */
.log-scope-row{padding:10px 20px;border-bottom:1px solid var(--bd);flex-shrink:0;display:flex;gap:8px;background:rgba(18,45,28,.18)}
.log-scope-btn{flex:1;padding:8px 14px;border-radius:20px;font-size:13px;font-family:'Jost',sans-serif;border:1.5px solid var(--bd);background:none;color:var(--soft);cursor:pointer;transition:all .15s;letter-spacing:.04em}
.log-scope-btn.on{background:var(--gold);color:var(--forest);border-color:var(--gold);font-weight:500}
.log-scope-btn:hover:not(.on){border-color:var(--gold);color:var(--gold-l)}