/* ── Topbar ── */
.topbar{
  height:48px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;border-bottom:1px solid var(--bd);background:var(--bg);
  position:sticky;top:0;z-index:100;flex-shrink:0;
}
.logo{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--t1);letter-spacing:-.3px}
.logo-dot{color:var(--brand)}
.logo-div{width:1px;height:14px;background:var(--bd-s);margin:0 4px}
.logo-sub{font-size:12px;font-weight:400;color:var(--t3)}
.topbar-right{display:flex;align-items:center;gap:8px}

/* ── App Shell ── */
.app-shell{display:flex;height:calc(100vh - 48px);overflow:hidden}

/* ── LEFT panel ── */
.left-panel{
  width:240px;flex-shrink:0;border-right:1px solid var(--bd);
  background:var(--bg-sub);overflow-y:auto;display:flex;flex-direction:column;
}
.lp-section{padding:14px 16px;border-bottom:1px solid var(--bd)}
.lp-label{
  font-size:10px;font-weight:700;color:var(--t3);
  letter-spacing:.8px;text-transform:uppercase;margin-bottom:10px;
}

/* ── CENTER panel ── */
.center-panel{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);min-width:0;
}
.center-header{
  height:48px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;border-bottom:1px solid var(--bd);flex-shrink:0;
}
.center-body{flex:1;overflow-y:auto;padding:24px}

/* ── RIGHT panel ── */
.right-panel{
  width:340px;flex-shrink:0;border-left:1px solid var(--bd);
  background:var(--bg-sub);overflow-y:auto;display:flex;flex-direction:column;
}
.rp-header{
  height:48px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;border-bottom:1px solid var(--bd);flex-shrink:0;
}
.rp-body{flex:1;padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}

/* ── Platform tabs (topbar) ── */
.platform-tabs{display:flex;gap:2px;background:var(--sf2);border-radius:var(--r-md);padding:3px}
.platform-tab{
  padding:5px 14px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;
  cursor:pointer;border:none;background:transparent;color:var(--t3);
  transition:all .15s;font-family:'Pretendard',sans-serif;
}
.platform-tab:hover{color:var(--t1)}
.platform-tab.active{background:var(--sf);color:var(--t1);box-shadow:var(--sh-sm)}

/* ── Empty states ── */
.empty-state{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:40px;
}
.empty-icon{font-size:36px;margin-bottom:4px}