/* ===== Theme tokens ===== */
:root{
  --bg: #f7f7f8;
  --surface: #ffffff;
  --text: #0f172a;          /* slate-900 */
  --muted: #64748b;         /* slate-500 */
  --border: #e6e8eb;
  --primary: #2563eb;       /* indigo-ish */
  --primary-weak: #e8f0fe;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}

html,body{ background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; }

/* ===== Minimal navbar (glass) ===== */
.navbar-ghost{
  backdrop-filter: saturate(1.2) blur(8px);
  background: rgba(255,255,255,.6);
  border-bottom: 1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:.5rem; font-weight:600; }
.brand-emoji{ filter:saturate(1.15); }
.brand-text{ letter-spacing:.2px; }

/* ===== App layout ===== */
.menu-app{ min-height: calc(100vh - 56px); padding-left: 56px; }
@media (max-width: 991.98px){ .menu-app{ padding-left:0; } }

.menu-content{
  background: var(--surface);
  min-height: calc(100vh - 56px);
  display:flex; flex-direction:column;
}

/* content head */
.content-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem;
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  backdrop-filter: blur(6px);
}
.content-head .title{ font-weight:600; }
.link-soft{ color: var(--muted); text-decoration: none; }
.link-soft:hover{ text-decoration: underline; }

/* subtle button */
.btn-subtle{
  --bs-btn-color:#334155;
  --bs-btn-bg:#f3f4f6;
  --bs-btn-border-color:#e5e7eb;
  --bs-btn-hover-bg:#e8edf7;
  --bs-btn-hover-border-color:#dbe1f1;
  --bs-btn-active-bg:#e1e7f8;
  --bs-btn-active-border-color:#cfd7ef;
  box-shadow: none !important;
}

/* ===== Sidebar overlay ===== */
.menu-sidebar{
  position: fixed; top:56px; left:0; bottom:0;
  width: 280px; background: var(--surface);
  transform: translateX(-100%);
  transition: transform .22s ease;
  z-index: 1040; overflow-y:auto;
  box-shadow: var(--shadow);
}
.sidebar-head{
  padding: .75rem 1rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position: sticky; top:0; background: var(--surface); z-index:1;
}
@media (max-width: 991.98px){ .menu-sidebar{ width: 88%; max-width:360px; } }

/* Overlay backdrop + light blur */
.menu-overlay{
  position: fixed; inset:56px 0 0 0;
  background: rgba(15,23,42,.25);
  backdrop-filter: blur(2px);
  opacity:0; visibility:hidden; transition: opacity .18s ease, visibility .18s ease;
  z-index:1030;
}
.menu-app.sidebar-open .menu-sidebar{ transform: translateX(0); }
.menu-app.sidebar-open .menu-overlay{ opacity:1; visibility:visible; }

/* ===== Rail icon-only ===== */
.menu-rail{
  position: fixed; top:56px; left:0; bottom:0;
  width:56px; background: transparent; z-index:1020;
}
.rail-btn,.rail-link{
  width:56px; height:48px; display:flex; align-items:center; justify-content:center;
  border:0; background: transparent; text-decoration:none; color: var(--text);
  transition: background-color .15s ease, transform .04s ease;
}
.rail-btn:hover,.rail-link:hover{ background: rgba(0,0,0,.035); }
.rail-link.active{
  background: var(--primary-weak);
  box-shadow: inset 3px 0 0 var(--primary);
}
.rail-sep{ height:1px; background: var(--border); margin:6px 8px; }
.rail-icon{ font-size:18px; line-height:1; }

/* ===== Sidebar list ===== */
.menu-list .menu-link{
  text-decoration:none; display:block; color: var(--text);
  transition: background-color .15s ease;
}
.menu-list .menu-link:hover{ background:#f6f8fb; }
.menu-list .menu-link.active{
  background: var(--primary-weak);
  font-weight:600; box-shadow: inset 3px 0 0 var(--primary);
}

/* ===== Iframe + loader ===== */
.embed-wrapper{ position:relative; width:100%; height: calc(100vh - 56px - 48px); max-height:100%; }
.embed-frame{ border:0; width:100%; height:100%; background: #fff; border-radius: 10px; }

/* skeleton shimmer */
.frame-loader{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:2rem; z-index:2; pointer-events:none;
  background: linear-gradient(180deg, #fff, #fff, #fff0);
  border-radius: 10px;
}
.shimmer{
  width: 72%; max-width: 880px; height: 16px; border-radius:999px; overflow:hidden;
  background: linear-gradient(90deg, #f1f5f9, #e2e8f0, #f1f5f9);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.loader-text{ color: var(--muted); font-size: .9rem; }
@keyframes shimmer{ 0%{ background-position: 200% 0;} 100%{ background-position: -200% 0;} }

/* ===== Scrollbar halus (webkit) ===== */
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{ background:#dfe3e8; border-radius:999px }
*::-webkit-scrollbar-thumb:hover{ background:#cfd6dd }

/* Small utilities */
.small{ color: var(--muted) }