.create-topic-page {
  min-height: 100vh;
  background-color: #000;
  color: #fff;

  .content-wrapper {
    padding: 20px;
    padding-bottom: 40px;
  }

  .header-actions {
      display: flex;
      margin-bottom: 20px;
      background: rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 4px;

      .action-item {
          flex: 1;
          text-align: center;
          padding: 8px 0;
          font-size: 14px;
          color: #888;
          border-radius: 6px;
          transition: all 0.3s;

          &.active {
              background: #333;
              color: #fff;
              font-weight: 600;
          }
      }
  }

  .preview-container {
      margin-bottom: 30px;
      background: #111;
      padding: 20px;
      border-radius: 12px;
      border: 1px solid #333;

      .preview-title {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 16px;
          border-bottom: 1px solid #333;
          padding-bottom: 10px;
      }

      .markdown-body {
          font-size: 15px;
          line-height: 1.6;
          color: #e0e0e0;

          image {
            max-width: 100%;
            border-radius: 8px;
            margin: 10px 0;
          }

          h1, h2, h3, h4, h5, h6 { margin-top: 24px; margin-bottom: 12px; color: #fff; font-weight: 700; line-height: 1.4; }
          h1 { font-size: 22px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
          h2 { font-size: 18px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 6px; }
          h3 { font-size: 16px; }
          
          p { margin-bottom: 14px; }
          
          strong { font-weight: 800; color: #fff; }
          em { font-style: italic; color: #aaa; }
          del { text-decoration: line-through; color: #666; }
          
          ul, ol { margin-bottom: 14px; padding-left: 20px; }
          li { margin-bottom: 4px; list-style-position: outside; }
          ul li { list-style-type: disc; }
          ol li { list-style-type: decimal; }

          blockquote {
              border-left: 4px solid #00b96b;
              background: rgba(255, 255, 255, 0.05);
              padding: 10px 14px;
              margin: 14px 0;
              border-radius: 4px;
              color: #bbb;
              font-style: italic;
              
              p { margin-bottom: 0; }
          }
          
          a { color: #00b96b; text-decoration: none; }
          
          hr {
              height: 1px;
              background: rgba(255,255,255,0.1);
              border: none;
              margin: 20px 0;
          }
          
          table {
              width: 100%;
              border-collapse: collapse;
              margin: 14px 0;
              font-size: 13px;
              overflow-x: auto;
              display: block;
              
              th, td {
                  border: 1px solid rgba(255,255,255,0.1);
                  padding: 8px;
                  text-align: left;
              }
              
              th {
                  background: rgba(255,255,255,0.05);
                  font-weight: 700;
                  color: #fff;
              }
          }
          
          code {
              background: rgba(255,255,255,0.1);
              padding: 2px 6px;
              border-radius: 4px;
              font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
              color: #ff7875;
              margin: 0 2px;
          }
          
          pre {
              background: #161616;
              padding: 16px;
              border-radius: 8px;
              overflow-x: auto;
              margin: 16px 0;
              border: 1px solid #333;
              
              code { 
                  background: transparent; 
                  color: #a6e22e; 
                  padding: 0; 
                  font-size: 13px; 
                  margin: 0;
                  white-space: pre;
              }
          }
      }
  }

  .form-item {
    margin-bottom: 20px;

    .label {
      display: block;
      margin-bottom: 8px;
      color: #888;
      font-size: 14px;
    }

    input {
      background: rgba(255,255,255,0.1);
      border: 1px solid #333;
      padding: 10px;
      border-radius: 8px;
      color: #fff;
    }

    textarea {
      background: rgba(255,255,255,0.1);
      border: 1px solid #333;
      padding: 10px;
      border-radius: 8px;
      color: #fff;
      width: 100%;
      min-height: 200px;
    }

    .picker {
      background: rgba(255,255,255,0.1);
      border: 1px solid #333;
      padding: 10px;
      border-radius: 8px;
      color: #fff;
    }
  }

  .media-upload {
    margin-bottom: 30px;
    
    .upload-btn {
      display: inline-block;
      padding: 8px 16px;
      background: rgba(255,255,255,0.1);
      border-radius: 4px;
      font-size: 14px;
      color: #ccc;
    }
  }

  .submit-btn {
    background-color: #00b96b;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    
    &.disabled {
      background-color: #333;
      color: #666;
    }
  }
}
