:root {
  --app-bg: radial-gradient(circle at top left, #f6fbff 0%, #eef3ff 38%, #ffffff 100%);
  --card-shadow: 0 12px 30px rgba(37, 58, 92, 0.12);
}

html, body {
  height: 100%;
}

body {
  background: var(--app-bg);
}

.app-shell {
  display: grid;
  grid-template-columns: 1fr;
}

.content-area {
  min-height: calc(100vh - 64px);
}

.right-sidebar {
  position: fixed;
  top: 64px;
  right: 0;
  width: 320px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.92);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

@media (min-width: 992px) {
  .content-area .container-fluid {
    padding-right: 340px;
  }
}

.nav-panel {
  backdrop-filter: blur(6px);
}

.soft-card {
  border: none;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}

.assignment-preview img {
  max-width: 180px;
  border-radius: 8px;
}

.assignment-preview iframe {
  width: 100%;
  min-height: 260px;
  border: 1px solid #d4dce8;
  border-radius: 10px;
}