*,*::before,*::after { box-sizing: border-box; }

body {
  font-family: Arial, sans-serif;
  background: #454545;
  color: white;
  margin: 0;
  padding: 0;
}

.split-layout { margin: 0; }

.split-wrapper {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.review-sidebar {
  width: 260px;
  min-width: 200px;
  background: #2c2c2c;
  overflow-y: auto;
  flex-shrink: 0;
  border-right: 2px solid #ff9b19;
}

.sidebar-header {
  padding: 12px 15px;
  background: #ff9b19;
  position: sticky;
  top: 0;
}

.sidebar-header a { color: #000; font-weight: bold; text-decoration: none; }
.sidebar-header a:hover { text-decoration: underline; }

.az-group { padding: 0 10px; }

.az-letter {
  color: #ff9b19;
  font-weight: bold;
  font-size: 1.1em;
  margin: 12px 0 4px 0;
  border-bottom: 1px solid #444;
}

.az-group ul { list-style: none; padding: 0; margin: 0; }

.az-group li {
  padding: 4px 0;
  border-bottom: 1px solid #333;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.az-group a { font-size: 0.9em; color: #ccc; font-weight: normal; text-decoration: none; }
.az-group a:hover { color: #ff9b19; }
.az-group a.active { color: #ff9b19; font-weight: bold; }

.sidebar-stars { font-size: 0.75em; }

.review-main {
  flex: 1;
  overflow-y: auto;
  padding: 25px 30px;
}

.review-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  height: 100%;
}

.welcome-title {
  font-size: 2em;
  font-weight: bold;
  color: #ff9b19;
}

.welcome-sub { color: #aaa; font-size: 1em; }

.welcome-hint { color: #666; font-size: 0.9em; margin-top: 10px; }

.collage {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 600px;
}

.collage img {
  width: 80px;
  height: auto;
  border-radius: 5px;
  border: 2px solid transparent;
  transition: border 0.2s ease, opacity 0.2s ease;
}

.collage a:hover img {
  border-color: #ff9b19;
  opacity: 0.85;
}

.review-film-header {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-bottom: 30px;
}

.review-cover {
  width: 160px;
  flex-shrink: 0;
  border-radius: 8px;
}

.review-info { flex: 1; }

.review-title {
  font-size: 1.8em;
  font-weight: bold;
  color: #ff9b19;
  margin: 0 0 8px 0;
}

.review-meta { font-size: 0.95em; color: #ccc; margin: 3px 0; }

.review-stars { display: flex; gap: 3px; margin: 10px 0; }
.review-stars span        { font-size: 2em; color: #555; }
.review-stars span.filled { color: #ff9b19; }

.review-text {
  background: #2c2c2c;
  border-radius: 10px;
  padding: 25px 30px;
  line-height: 1.8;
  font-size: 1em;
  border-left: 4px solid #ff9b19;
}

.review-text h2 { color: #ff9b19; font-size: 1.15em; margin: 16px 0 4px 0; }
.review-text h3 { color: #ffaa33; font-size: 1.0em; margin: 10px 0 2px 0; }
.review-text hr { border: none; border-top: 1px solid #444; margin: 14px 0; }
.review-text strong { color: #ff9b19; }

.md-stars { display: inline-flex; gap: 1px; vertical-align: middle; font-size: 1.1em; }

a { color: #ff9b19; text-decoration: none; font-weight: bold; }
a:hover { color: #ffaa33; text-decoration: underline; }