.osd-wrap {
  --osd-bg: #0b0908;
  --osd-panel: #15100d;
  --osd-panel-2: #1c1510;
  --osd-gold: #d0b27a;
  --osd-gold-2: #a88443;
  --osd-text: #f2e5c7;
  --osd-muted: #c4b08a;
  --osd-border: rgba(208,178,122,.26);
  color: var(--osd-text);
  font-family: Georgia, 'Times New Roman', serif;
  background:
    radial-gradient(circle at top right, rgba(110,73,22,.18), transparent 36%),
    linear-gradient(180deg, #120e0b, #080605);
  border: 1px solid rgba(208,178,122,.18);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.osd-wrap * { box-sizing: border-box; }
.osd-wrap a { color: var(--osd-gold); }
.osd-auth-screen {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.osd-auth-card,
.osd-panel,
.osd-card {
  background: linear-gradient(180deg, rgba(28,21,16,.98), rgba(11,8,6,.98));
  border: 1px solid var(--osd-border);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.osd-auth-card {
  max-width: 620px;
  width: 100%;
  padding: 32px;
}
.osd-auth-brand h1,
.osd-portal-header h1,
.osd-card h2,
.osd-card h3,
.osd-auth-step h2 { color: var(--osd-gold); margin-top: 0; }
.osd-auth-kicker {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: #c8a968;
  margin-bottom: 8px;
}
.osd-form { display: grid; gap: 14px; }
.osd-form label { display: grid; gap: 8px; font-weight: 700; color: var(--osd-text); }
.osd-form input,
.osd-form textarea,
.osd-form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(208,178,122,.22);
  background: #18120e;
  color: var(--osd-text);
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.osd-form input::placeholder,
.osd-form textarea::placeholder { color: rgba(242,229,199,.48); }
.osd-form input:focus,
.osd-form textarea:focus,
.osd-form select:focus {
  outline: none;
  border-color: rgba(208,178,122,.48);
  box-shadow: 0 0 0 3px rgba(208,178,122,.12);
}
.osd-button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #d7b67c, #a77d37);
  color: #1b1209;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.osd-button-light {
  background: transparent;
  color: var(--osd-text);
  border: 1px solid var(--osd-border);
}
.osd-button-small { padding: 8px 14px; font-size: 12px; }
.osd-auth-note { opacity: .82; margin-top: 16px; color: var(--osd-muted); }
.osd-notice {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 12px;
}
.osd-notice-success { background: rgba(49,95,52,.45); border: 1px solid rgba(124,205,135,.32); }
.osd-notice-error { background: rgba(95,49,49,.45); border: 1px solid rgba(205,124,124,.32); }
.osd-portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.osd-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.osd-nav-item {
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--osd-text);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--osd-border);
}
.osd-nav-item.is-active { background: rgba(208,178,122,.16); color: var(--osd-gold); }
.osd-panel { padding: 24px; }
.osd-grid { display: grid; gap: 18px; }
.osd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.osd-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.osd-stack { display: grid; gap: 18px; }
.osd-stat {
  padding: 18px;
  border: 1px solid var(--osd-border);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
}
.osd-stat span { display: block; opacity: .82; font-size: 13px; margin-bottom: 8px; color: var(--osd-muted); }
.osd-stat strong { font-size: 22px; color: var(--osd-gold); }
.osd-card { padding: 22px; margin-bottom: 18px; }
.osd-bullets { margin: 0; padding-left: 18px; }
.osd-bullets li { margin-bottom: 8px; }
.osd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.osd-table th,
.osd-table td {
  border-bottom: 1px solid rgba(208,178,122,.16);
  padding: 10px 8px;
  vertical-align: top;
}
.osd-table th { color: var(--osd-gold); }
.osd-content-item {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(208,178,122,.18);
  background: rgba(255,255,255,.02);
}
.osd-content-type {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  color: #c8a968;
  margin-bottom: 8px;
}
.osd-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(208,178,122,.14);
  color: var(--osd-gold);
  font-size: 12px;
}
.osd-inline-form { display: inline-block; }
.osd-tight-form { gap: 10px; margin-top: 12px; }
.osd-actions-stack { display: grid; gap: 8px; }
.osd-id-card-print-area { padding: 16px 0; }
.osd-id-card-svg-wrap {
  max-width: 1079px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
}
.osd-card-svg {
  display: block;
  width: 100%;
  height: auto;
}
.osd-divider {
  border: 0;
  border-top: 1px solid rgba(208,178,122,.18);
  margin: 16px 0;
}
.osd-qr-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  align-items: start;
  margin: 18px 0 22px;
}
.osd-qr-box {
  width: 240px;
  min-height: 240px;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
}
.osd-qr-box svg { display: block; width: 100%; height: auto; }
.osd-qr-meta code {
  display: inline-block;
  padding: 4px 8px;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  word-break: break-all;
}
.osd-small-note { font-size: 13px; opacity: .82; color: var(--osd-muted); }
.osd-auth-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.osd-top-space { margin-top: 10px; }
.osd-table a { color: var(--osd-gold); }
.osd-table form { margin: 0; }
.osd-card small { opacity: .8; color: var(--osd-muted); }
.osd-content-item p:last-child { margin-bottom: 0; }
.osd-content-rank {
  margin: 8px 0 10px;
  color: var(--osd-muted);
  font-size: 13px;
}
.osd-video-embed {
  margin: 12px 0;
  border: 1px solid rgba(208,178,122,.18);
  border-radius: 16px;
  overflow: hidden;
  background: #050403;
  width: min(100%, 760px);
  aspect-ratio: 16 / 9;
}
.osd-video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.osd-form label > input[type="checkbox"] { width: auto; }
.osd-avatar-preview {
  width: 120px;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(208,178,122,.35);
  border-radius: 8px;
  display: block;
}
@media (max-width: 900px) {
  .osd-grid-2,
  .osd-grid-3 { grid-template-columns: 1fr; }
  .osd-portal-header { flex-direction: column; align-items: flex-start; }
  .osd-video-embed { width: 100%; }
}
@media (max-width: 700px) {
  .osd-wrap { padding: 16px; border-radius: 18px; }
  .osd-qr-wrap { grid-template-columns: 1fr; }
  .osd-qr-box { width: 100%; max-width: 260px; }
}
@media print {
  body * { visibility: hidden !important; }
  .osd-id-card-print-area, .osd-id-card-print-area * { visibility: visible !important; }
  .osd-id-card-print-area { position: absolute; inset: 0; padding: 0; background: #fff; }
  .osd-id-card-svg-wrap { max-width: 100%; margin: 0; box-shadow: none; border-radius: 0; }
  .osd-print-hide { display: none !important; }
}

.osd-card h3 small { color: var(--osd-muted); font-size: .82em; font-weight: 400; }


.osd-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .9fr);
  gap: 18px;
  align-items: start;
}
.osd-content-main,
.osd-content-sidebar {
  min-width: 0;
}
.osd-content-sidebar {
  display: grid;
  gap: 18px;
}
.osd-section-card {
  margin-bottom: 0;
}
.osd-video-list,
.osd-resource-list {
  display: grid;
  gap: 16px;
}
.osd-content-item-video {
  display: grid;
  justify-items: start;
}
.osd-content-item-video .osd-video-embed {
  justify-self: start;
}
.osd-content-item-resource p {
  margin-top: 10px;
}
@media (max-width: 1100px) {
  .osd-content-layout {
    grid-template-columns: 1fr;
  }
}

.osd-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}
.osd-content-main,
.osd-content-sidebar,
.osd-video-list,
.osd-resource-list {
  display: grid;
  gap: 18px;
}
.osd-content-flags,
.osd-video-actions,
.osd-video-progress-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.osd-video-progress-summary { margin-top: 14px; }
.osd-tag-success {
  background: rgba(71, 145, 88, .22);
  color: #bfe6c7;
  border: 1px solid rgba(122, 214, 145, .32);
}
.osd-tag-muted {
  background: rgba(255,255,255,.06);
  color: var(--osd-muted);
}
.osd-content-item.is-watched {
  border-color: rgba(122, 214, 145, .28);
  box-shadow: inset 0 0 0 1px rgba(122, 214, 145, .08);
}
@media (max-width: 900px) {
  .osd-content-layout { grid-template-columns: 1fr; }
}