* {
   margin: 0;
   padding: 0;
 }

 body {
   background: #f1f2f3;
 }

 .container {
   box-sizing: border-box;
   width: 100%;
   max-width: 1560px;
   min-width: 1240px;
   margin: 20px auto;
   color: #333;
 }

 .container * {
   box-sizing: border-box;
 }

 header {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-bottom: 25px;
 }


 header h1 {
   font-size: 30px;
   font-weight: 700;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   margin-bottom: 5px;
 }


 header p {
   font-size: 16px;
   color: #7f8c8d;
   margin: 0 auto;
 }


 .tool-icon {
   font-size: 2.5rem;
   margin-bottom: 15px;
 }

 .editor-container {
   display: flex;
   gap: 20px;
   margin-bottom: 25px;
 }

 .editor-box {
   flex: 1;
   background: white;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }

 .editor-header {
   background: #3498db;
   color: white;
   padding: 10px 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .editor-title {
   font-weight: bold;
 }

 .editor-content {
   height: 600px;
 }

 textarea {
   width: 100%;
   height: 100%;
   padding: 15px;
   border: none;
   resize: none;
   font-size: 14px;
   line-height: 1.5;
   outline: none;
   background: #fafafa;
 }

 .button-group {
   display: flex;
   gap: 20px;
   margin-bottom: 25px;
   flex-wrap: wrap;
 }

 button {
   padding: 13px 32px;
   background: #3498db;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
   transition: background 0.3s;
 }

 button:hover {
   background: #2980b9;
 }

 button.secondary {
   background: #95a5a6;
 }

 button.secondary:hover {
   background: #7f8c8d;
 }

 button.success {
   background: #2ecc71;
 }

 button.success:hover {
   background: #27ae60;
 }

 .notice {
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.8);
   color: white;
   padding: 10px 20px;
   border-radius: 4px;
   opacity: 0;
   transition: opacity 0.3s;
   z-index: 1000;
 }

 .notice.show {
   opacity: 1;
 }

 .features {
   background: white;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   margin-bottom: 25px;
 }

 .features h2 {
   font-size: 20px;
   margin-bottom: 15px;
   color: #2c3e50;
   border-bottom: 1px solid #eee;
   padding-bottom: 10px;
 }

 .features-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
 }

 .feature-item {
   background: #f8f9fa;
   padding: 15px;
   border-radius: 6px;
   border-left: 4px solid #3498db;
 }

 .feature-item h3 {
   margin-bottom: 8px;
   color: #3498db;
 }

 footer {
   text-align: center;
   color: #7f8c8d;
   font-size: 0.9rem;
 }

 .file-input {
   display: none;
 }

 .xml-example {
   white-space: pre-wrap;
   font-family: 'Courier New', Courier, monospace;
   font-size: 13px;
   line-height: 1.5;
 }