/* ── Top Bar ── */
.top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  position:sticky;top:0;z-index:100;
  background:rgba(7,8,12,.82);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.logo-area{display:flex;align-items:center;gap:10px}
.logo-box{
  width:32px;height:32px;border-radius:8px;
  background:var(--a);color:#000;
  font-family:'Syne',sans-serif;font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
}
.logo-text{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;color:var(--t1)}
.online-row{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t2)}
.dot{
  width:6px;height:6px;border-radius:50%;background:var(--sem-green);
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.top-actions{display:flex;gap:6px;align-items:center}
.ibtn{
  width:34px;height:34px;border-radius:9px;
  background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;position:relative;
  transition:background .18s;
}
.ibtn:hover{background:var(--card-h)}
.ibtn .notif{
  position:absolute;top:-3px;right:-3px;
  background:var(--red);color:#fff;
  font-size:9px;font-weight:700;
  width:14px;height:14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* ── Overlay ── */
.overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease-out-expo);
}
.overlay.open{opacity:1;pointer-events:all}

/* ── Drawer ── */
.drawer{
  position:fixed;top:0;left:-290px;bottom:0;
  width:278px;z-index:301;
  background:var(--base);
  border-right:1px solid var(--border);
  overflow-y:auto;
  transition:left .3s var(--ease-out-expo);
  display:flex;flex-direction:column;
}
.drawer.open{left:0}
.drawer-close{
  position:absolute;top:12px;right:12px;
  width:28px;height:28px;border-radius:7px;
  background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:14px;color:var(--t2);
}
.drawer-head{
  padding:20px 16px 14px;
  border-bottom:1px solid var(--border);
}
.drawer-avatar{
  width:42px;height:42px;border-radius:11px;
  background:var(--a);color:#000;
  font-family:'Syne',sans-serif;font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
}
.drawer-head .title{font-family:'Syne',sans-serif;font-weight:700;font-size:16px;color:var(--t1)}
.drawer-head .sub{font-size:11px;color:var(--t2);margin-top:2px}
.drawer-section{padding:10px 0}
.drawer-section-title{
  padding:4px 16px 6px;
  font-size:10px;font-weight:600;
  color:var(--t3);letter-spacing:.08em;text-transform:uppercase;
}
.drawer-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;
  cursor:pointer;font-size:13px;color:var(--t2);
  transition:background .15s,color .15s;
  position:relative;
}
.drawer-item:hover{background:var(--card);color:var(--t1)}
.drawer-item.active{background:var(--a-dim);color:var(--a)}
.drawer-item.active::before{
  content:'';
  position:absolute;left:0;top:4px;bottom:4px;
  width:3px;border-radius:0 3px 3px 0;
  background:var(--a);
}
.di-icon{font-size:15px}
.di-badge{
  margin-left:auto;
  background:var(--red);color:#fff;
  font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:20px;
  min-width:18px;text-align:center;
}

/* ── Content / Pages ── */
.content{padding:0 14px 100px}
.page{display:none}
.page.active{display:block;animation:fadeUp .3s var(--ease-out-expo)}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
.page-header{padding:16px 0 10px;display:flex;align-items:center;justify-content:space-between}
.ptitle{font-family:'Syne',sans-serif;font-weight:700;font-size:18px;color:var(--t1)}

/* ── Bottom Nav ── */
.bnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  z-index:200;
  background:rgba(7,8,12,.88);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border-top:1px solid var(--border);
  display:flex;
}
.ni{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px 4px 12px;
  cursor:pointer;gap:3px;position:relative;
}
.ni .nn{font-size:18px}
.ni .nl{font-size:10px;color:var(--t2);transition:color .15s}
.ni.a .nl{color:var(--a)}
.ni.a::before{
  content:'';
  position:absolute;top:0;left:20%;right:20%;
  height:2px;border-radius:0 0 3px 3px;
  background:var(--a);
}

/* ── Modal ── */
.modal{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
}
.modal.open{pointer-events:all}
.modal-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.6);
  opacity:0;transition:opacity .25s;
}
.modal.open .modal-overlay{opacity:1}
.modal-box{
  position:relative;z-index:1;
  width:100%;max-width:430px;
  background:var(--base);
  border-radius:20px 20px 0 0;
  border:1px solid var(--border);
  border-bottom:none;
  max-height:88vh;
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .32s var(--ease-out-expo);
}
.modal.open .modal-box{transform:translateY(0)}
.modal-drag{
  width:36px;height:4px;border-radius:2px;
  background:var(--t3);
  margin:10px auto 6px;flex-shrink:0;
}
.modal-head{
  padding:6px 16px 12px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.modal-head h3{font-family:'Syne',sans-serif;font-weight:700;font-size:16px}
.modal-body{padding:16px;overflow-y:auto;flex:1}
.modal-foot{
  padding:12px 16px;
  border-top:1px solid var(--border);
  display:flex;gap:8px;flex-shrink:0;
}

/* ── Fields ── */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:12px;color:var(--t2);font-weight:500}
.field input,.field select,.field textarea{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--t1);
  padding:9px 12px;
  font-family:'Outfit',sans-serif;
  font-size:14px;
  outline:none;
  transition:border-color .15s;
  width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--a-border)}
.field textarea{resize:vertical;min-height:80px}
.field select option{background:var(--base)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── Confirm ── */
.confirm-box{
  position:fixed;inset:0;z-index:600;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.confirm-box.open{pointer-events:all}
.confirm-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.7);
  opacity:0;transition:opacity .2s;
}
.confirm-box.open .confirm-overlay{opacity:1}
.confirm-card{
  position:relative;z-index:1;
  background:var(--base);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 20px;
  width:calc(100% - 40px);
  max-width:320px;
  transform:scale(.9);opacity:0;
  transition:transform .25s var(--ease-spring),opacity .2s;
}
.confirm-box.open .confirm-card{transform:scale(1);opacity:1}
.confirm-icon{font-size:28px;text-align:center;margin-bottom:12px}
.confirm-card p{color:var(--t2);font-size:14px;text-align:center;line-height:1.5;margin-bottom:16px}
.confirm-btns{display:flex;gap:8px}
.confirm-btns button{flex:1}

/* ── Toast ── */
.toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:700;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:10px 18px;
  font-size:13px;color:var(--t1);
  opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;
  white-space:nowrap;max-width:340px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:all}
.toast.success{border-color:var(--a);color:var(--a)}
.toast.danger{border-color:var(--red);color:var(--red)}

/* ── Filter Bar ── */
.filter-bar{
  display:flex;gap:8px;padding:8px 14px;
  overflow-x:auto;scrollbar-width:none;
}
.filter-bar::-webkit-scrollbar{display:none}

/* ── Search Overlay ── */
#search-overlay{
  position:fixed;inset:0;z-index:450;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(8px);
  display:none;flex-direction:column;
  padding:60px 16px 20px;
}
#search-overlay.open{display:flex}
#search-input{
  background:var(--card);
  border:1px solid var(--a-border);
  border-radius:var(--r-sm);
  color:var(--t1);
  padding:12px 16px;
  font-size:15px;
  font-family:'Outfit',sans-serif;
  outline:none;
  width:100%;
  margin-bottom:12px;
}
#search-results{overflow-y:auto;flex:1}
.search-item{
  padding:10px 14px;
  border-radius:var(--r-xs);
  cursor:pointer;
  display:flex;align-items:center;gap:4px;
  border-bottom:1px solid var(--border);
  transition:background .15s;
}
.search-item:hover{background:var(--card-h)}
.search-item:last-child{border-bottom:none}

/* ── Login Screen ── */
#login-screen{
  display:none;
  position:fixed;inset:0;z-index:400;
  background:var(--void);
  align-items:center;justify-content:center;
}
#login-screen.visible{display:flex}
#login-screen .lcard{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 22px;
  width:calc(100% - 32px);
  max-width:340px;
}
#login-screen .lhead{text-align:center;margin-bottom:22px}
#login-screen .lhead .logo-box{
  width:52px;height:52px;border-radius:13px;
  font-size:20px;margin:0 auto 12px;
}
#login-screen .lhead .ltitle{
  font-family:'Syne',sans-serif;font-weight:700;font-size:20px;color:var(--t1);
}
#login-screen .lhead .lsub{font-size:13px;color:var(--t2);margin-top:4px}

/* ── Responsive desktop overrides (≥ 768px) ── */
@media(min-width:768px){
  .logo-box{cursor:default}
  .top-bar .logo-area .logo-box::after{content:'☰';display:none}
  /* Hide hamburger icon on desktop since drawer is always visible */
  .top-bar .logo-box{opacity:0;pointer-events:none;width:0;overflow:hidden;padding:0;margin:0}

  /* Confirm box centered */
  .confirm-card{max-width:400px}

  /* Search overlay - narrower centered */
  #search-overlay{
    padding:80px calc(260px + 60px) 20px 60px;
    align-items:flex-start;
  }
}