:root {
          --bg: #e6f4ff;
          --surface: rgba(255, 255, 255, 0.88);
          --surface-strong: #ffffff;
          --text: #102f4a;
          --muted: #557590;
          --line: rgba(16, 47, 74, 0.12);
          --brand: #4aa3ff;
          --brand-deep: #1f6fe5;
          --brand-soft: #d8ecff;
          --danger: #d64545;
          --success: #127c52;
          --shadow: 0 24px 60px rgba(31, 111, 229, 0.14);
          --radius-xl: 30px;
          --radius-lg: 22px;
          --radius-md: 16px;
          --radius-sm: 12px;
      }

      * {
          box-sizing: border-box;
      }

      body {
          margin: 0;
          color: var(--text);
          font-family: "Manrope", sans-serif;
          background:
              radial-gradient(circle at top left, rgba(74, 163, 255, 0.18), transparent 28%),
              radial-gradient(circle at right 20%, rgba(142, 203, 255, 0.18), transparent 22%),
              linear-gradient(180deg, #f7fbff 0%, var(--bg) 55%, #dcedff 100%);
      }

      .loading-screen {
          position: fixed;
          inset: 0;
          background: #f7faff;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 9999;
      }

      .loader {
          background: var(--brand-soft);
          padding: 30px 40px;
          border-radius: 20px;
          text-align: center;
      }

      .loader button {
          background: var(--brand);
          border-radius: 10px;
          border: none;
          padding: 10px 20px;
          font-size: 16px;
          font-weight: 700;
          color: white;
      }

      a {
          color: inherit;
          text-decoration: none;
      }

      .page-shell {
          width: min(94%, 1180px);
          margin: 24px auto 40px;
      }

      .hero {
          position: relative;
          overflow: hidden;
          padding: 34px;
          border-radius: var(--radius-xl);
          color: #ffffff;
          background:
              linear-gradient(140deg, rgba(24, 92, 191, 0.95), rgba(74, 163, 255, 0.88)),
              linear-gradient(90deg, #1f6fe5, #4aa3ff);
          box-shadow: 0 28px 80px rgba(31, 111, 229, 0.24);
      }

      .hero::before,
      .hero::after {
          content: "";
          position: absolute;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.08);
      }

      .hero::before {
          width: 240px;
          height: 240px;
          top: -70px;
          right: 12%;
      }

      .hero::after {
          width: 180px;
          height: 180px;
          bottom: -60px;
          right: -34px;
      }

      .hero-content {
          position: relative;
          z-index: 1;
          display: grid;
          grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
          gap: 24px;
          align-items: start;
      }

      .kicker {
          display: inline-flex;
          align-items: center;
          padding: 8px 14px;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.18);
          font-size: 0.82rem;
          font-weight: 800;
          letter-spacing: 0.08em;
          text-transform: uppercase;
      }

      h1 {
          margin: 16px 0 12px;
          font-family: "Playfair Display", serif;
          font-size: clamp(2rem, 4vw, 3rem);
          line-height: 1.2;
      }

      .hero p {
          margin: 0;
          max-width: 720px;
          color: rgba(255, 255, 255, 0.84);
          line-height: 1.75;
      }

      .hero-card {
          padding: 24px;
          border-radius: var(--radius-lg);
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.16);
          backdrop-filter: blur(12px);
      }

      .hero-card h2 {
          margin: 0 0 10px;
          font-size: 1.25rem;
      }

      .hero-card ul {
          margin: 0;
          padding-left: 18px;
          line-height: 1.8;
          color: rgba(255, 255, 255, 0.88);
      }

      .content-grid {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
          gap: 22px;
          margin-top: 24px;
      }

      .panel {
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: var(--radius-xl);
          padding: 28px;
          box-shadow: var(--shadow);
          backdrop-filter: blur(16px);
      }

      .content-grid>.panel:last-child {
          display: flex;
          flex-direction: column;
          min-height: 0;
      }

      .section-label {
          display: inline-flex;
          align-items: center;
          align-self: flex-start;
          gap: 8px;
          margin-bottom: 10px;
          padding: 8px 14px;
          border-radius: 999px;
          background: linear-gradient(135deg, #e6efff, #ffffff);
          color: var(--brand-deep);
          font-size: 0.82rem;
          font-weight: 800;
          letter-spacing: 0.06em;
          text-transform: uppercase;
      }

      .panel h2 {
          margin: 0 0 10px;
          font-size: 1.7rem;
      }

      .panel-intro {
          margin: 0 0 20px;
          color: var(--muted);
          line-height: 1.75;
      }

      .field-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px;
      }

      .field {
          display: grid;
          gap: 8px;
          margin-bottom: 16px;
      }

      .field label {
          font-size: 0.94rem;
          font-weight: 700;
      }

      .field input,
      .field select,
      .field textarea {
          width: 100%;
          padding: 13px 15px;
          border-radius: var(--radius-sm);
          border: 1px solid #c9d9ee;
          font: inherit;
          color: var(--text);
          background: rgba(255, 255, 255, 0.96);
          transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .field input:focus,
      .field select:focus,
      .field textarea:focus {
          outline: none;
          border-color: var(--brand-deep);
          box-shadow: 0 0 0 4px rgba(31, 111, 229, 0.12);
      }

      .field textarea {
          min-height: 150px;
          resize: vertical;
      }

      .button-row {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          margin-top: 8px;
      }

      .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 48px;
          padding: 0 20px;
          border: none;
          border-radius: 999px;
          font: inherit;
          font-weight: 800;
          cursor: pointer;
          transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
      }

      .btn:hover {
          transform: translateY(-2px);
      }

      .btn-primary {
          color: #ffffff;
          background: linear-gradient(135deg, var(--brand), var(--brand-deep));
          box-shadow: 0 14px 30px rgba(31, 111, 229, 0.22);
      }

      .btn-secondary {
          color: var(--brand-deep);
          background: #ffffff;
          border: 1px solid rgba(31, 111, 229, 0.14);
      }

      .btn-info {
          color: #ffffff;
          background: linear-gradient(135deg, #18a0b8, #0d7d92);
          box-shadow: 0 14px 30px rgba(13, 125, 146, 0.18);
      }

      .btn-danger {
          color: #ffffff;
          background: linear-gradient(135deg, #eb5757, var(--danger));
          box-shadow: 0 14px 30px rgba(214, 69, 69, 0.18);
      }

      .status-message {
          min-height: 24px;
          margin-top: 14px;
          font-weight: 700;
      }

      .status-message.success {
          color: var(--success);
      }

      .status-message.error {
          color: var(--danger);
      }

      .summary-strip {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 12px;
          margin-bottom: 20px;
      }

      .summary-card {
          padding: 18px;
          border-radius: var(--radius-md);
          background: linear-gradient(180deg, #ffffff, #f6fbff);
          border: 1px solid rgba(74, 163, 255, 0.14);
      }

      .summary-card strong {
          display: block;
          margin-bottom: 6px;
          font-size: 1.35rem;
          color: var(--brand-deep);
      }

      .summary-card span {
          color: var(--muted);
          font-size: 0.92rem;
      }

      .filter-row {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          margin-bottom: 18px;
      }

      .filter-chip {
          padding: 10px 16px;
          border-radius: 999px;
          border: 1px solid rgba(31, 111, 229, 0.14);
          background: #ffffff;
          color: var(--brand-deep);
          font: inherit;
          font-weight: 700;
          cursor: pointer;
      }

      .filter-chip.active {
          color: #ffffff;
          background: linear-gradient(135deg, var(--brand), var(--brand-deep));
          border-color: transparent;
      }

      .comments-board {
          overflow: hidden;
          border: 1px solid rgba(74, 163, 255, 0.16);
          border-radius: var(--radius-lg);
          background: rgba(255, 255, 255, 0.76);
      }

      .comments-toolbar {
          position: sticky;
          top: 0;
          z-index: 2;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          padding: 14px 16px;
          border-bottom: 1px solid rgba(74, 163, 255, 0.14);
          background: rgba(255, 255, 255, 0.94);
          backdrop-filter: blur(10px);
      }

      .comments-toolbar strong {
          font-size: 0.98rem;
      }

      .comments-toolbar span {
          color: var(--muted);
          font-size: 0.88rem;
          font-weight: 700;
      }

      .comments-stack {
          display: grid;
          gap: 12px;
          max-height: 360px;
          min-height: 180px;
          overflow-y: auto;
          padding: 14px;
          scroll-behavior: smooth;
          scrollbar-width: thin;
          scrollbar-color: rgba(31, 111, 229, 0.46) rgba(216, 236, 255, 0.7);
      }

      .comments-stack:focus {
          outline: none;
          box-shadow: inset 0 0 0 3px rgba(31, 111, 229, 0.1);
      }

      .comments-stack::-webkit-scrollbar {
          width: 10px;
      }

      .comments-stack::-webkit-scrollbar-track {
          background: rgba(216, 236, 255, 0.7);
          border-radius: 999px;
      }

      .comments-stack::-webkit-scrollbar-thumb {
          background: rgba(31, 111, 229, 0.46);
          border: 3px solid rgba(216, 236, 255, 0.7);
          border-radius: 999px;
      }

      .comment-card {
          padding: 16px;
          border-radius: var(--radius-md);
          background: linear-gradient(180deg, #ffffff, #f8fbff);
          border: 1px solid rgba(74, 163, 255, 0.14);
          box-shadow: 0 12px 26px rgba(31, 111, 229, 0.08);
      }

      .comment-meta {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          margin-bottom: 10px;
      }

      .comment-name {
          font-weight: 800;
          word-break: break-word;
      }

      .comment-chapter {
          display: inline-flex;
          align-items: center;
          padding: 6px 10px;
          border-radius: 999px;
          background: var(--brand-soft);
          color: var(--brand-deep);
          font-size: 0.8rem;
          font-weight: 700;
      }

      .comment-text {
          margin: 0 0 10px;
          color: #26425d;
          line-height: 1.65;
          white-space: pre-wrap;
          overflow-wrap: anywhere;
      }

      .comment-time {
          color: var(--muted);
          font-size: 0.85rem;
      }

      .empty-state {
          padding: 20px;
          border-radius: var(--radius-md);
          background: linear-gradient(180deg, #ffffff, #f8fbff);
          border: 1px dashed rgba(31, 111, 229, 0.24);
          color: var(--muted);
          text-align: center;
      }

      .back-link {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          margin-top: 18px;
          font-weight: 800;
          color: var(--brand-deep);
      }

      .only {
          display: none;
      }

      body.comments-only .hero,
      body.comments-only .content-grid>.panel:first-child {
          display: none;
      }

      body.comments-only .section-label {
          display: none;
      }

      body.comments-only .only {
          display: inline-flex;
      }

      body.comments-only .page-shell {
          width: min(94%, 780px);
      }

      body.comments-only .content-grid {
          display: block;
      }

      body.comments-only .content-grid>.panel:last-child {
          min-height: calc(100vh - 100px);
      }

      body.comments-only .comments-stack {
          max-height: none;
          min-height: 360px;
      }

      @media (max-width: 900px) {

          .hero-content,
          .content-grid,
          .summary-strip,
          .field-grid {
              grid-template-columns: 1fr;
          }
      }

      @media (max-width: 640px) {

          .page-shell {
              width: min(94%, 100%);
              margin-top: 14px;
          }

          .hero,
          .panel {
              padding: 22px;
              border-radius: 24px;
          }

          .button-row {
              flex-direction: column;
          }

          .btn {
              width: 100%;
          }
      }