:root{
      --bg:#f4f6f8;
      --panel:#ffffff;
      --panel-2:#f8fafc;
      --text:#1f2937;
      --muted:#6b7280;
      --line:#dbe2ea;
      --primary:#ff6a00;
      --primary-dark:#e45f00;
      --dark:#111827;
      --success:#0f9d58;
      --danger:#d93025;
      --shadow:0 10px 30px rgba(15,23,42,.08);
      --radius:16px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter,Arial,sans-serif;
      background:var(--bg);
      color:var(--text);
    }

    .app{
      display:grid;
      grid-template-columns: 560px 1fr;
      gap:20px;
      min-height:100vh;
      padding:20px;
    }

    .panel{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
	
	.panel-header-flex{
	  display:flex;
	  align-items:center;
	  justify-content:space-between;
	  gap:12px;
	}

    .panel-header{
      padding:18px 20px;
      border-bottom:1px solid var(--line);
      background:linear-gradient(180deg,#fff,#fafbfd);
    }

    .panel-header h1,
    .panel-header h2{
      margin:0;
      font-size:20px;
    }

    .panel-header p{
      margin:6px 0 0;
      color:var(--muted);
      font-size:14px;
    }

    .panel-body{
      padding:20px;
    }

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

    .field{
      margin-bottom:14px;
    }

    .field label{
      display:block;
      font-size:13px;
      font-weight:700;
      margin-bottom:6px;
      color:#374151;
    }

    .field input,
    .field textarea,
    .field select{
      width:100%;
      border:1px solid #cfd8e3;
      border-radius:12px;
      padding:12px 13px;
      font:inherit;
      color:var(--text);
      background:#fff;
      outline:none;
      transition:.2s border,.2s box-shadow;
    }

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

    .field input:focus,
    .field textarea:focus,
    .field select:focus,
    .rich-editor:focus{
      border-color:var(--primary);
      box-shadow:0 0 0 4px rgba(255,106,0,.12);
    }

    .section-card,
    .h3-card,
    .conclusion-card{
      background:var(--panel-2);
      border:1px solid var(--line);
      border-radius:14px;
      padding:16px;
      margin-bottom:16px;
    }

    .section-top,
    .h3-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }

    .section-top strong,
    .h3-top strong{
      font-size:15px;
    }

    .btn-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }

    button{
      border:0;
      border-radius:10px;
      padding:10px 14px;
      font:inherit;
      cursor:pointer;
      transition:.2s transform,.2s opacity,.2s background;
    }

    button:hover{opacity:.96}
    button:active{transform:translateY(1px)}

    .btn-primary{background:var(--primary);color:#fff;font-weight:700}
    .btn-primary:hover{background:var(--primary-dark)}
    .btn-secondary{background:#eef2f7;color:#1f2937}
    .btn-dark{background:var(--dark);color:#fff}
    .btn-danger{background:#fee2e2;color:#991b1b}
    .btn-success{background:#dcfce7;color:#166534}
    .btn-sm{padding:8px 10px;font-size:13px}

    .muted{
      color:var(--muted);
      font-size:13px;
    }

    .divider{
      height:1px;
      background:var(--line);
      margin:18px 0;
    }

	.preview-panel{
	  position:sticky;
	  top:20px;
	  align-self:start;
	  height:fit-content;
	}

	.preview-panel .preview-wrap{
	  max-height:calc(100vh - 120px);
	  overflow:auto;
	}

    .preview-wrap{
      background:#eef2f7;
      min-height:100%;
      padding:20px;
    }

    .article{
      max-width:1170px;
      margin:0 auto;
      background:#fff;
      border-radius:20px;
      box-shadow:var(--shadow);
      overflow:hidden;
      border:1px solid #e5e7eb;
    }

    .article-hero{
      width:100%;
      aspect-ratio:16/7;
      object-fit:cover;
      display:block;
      background:#e5e7eb;
    }

	.blog .article-header h1{
 	  margin: 10px;
	  padding: 0;
	  line-height:1.15;
	  font-size:34px;
	}

	.blog .article-excerpt{
	  font-size:16px;
	  line-height:1.55;
	  color:#4b5563;
	  margin:0;
	  padding:10px;
	}

	.blog .article-content{
	  padding:0 28px 28px;
	}

	.blog .article-content h2,
	.blog .article-conclusion h2{
	  margin:30px 0 12px;
	  font-size:26px;
	  line-height:1.2;
	  padding-left:12px;
	  border-left:5px solid var(--primary);
	}

	.blog .article-conclusion h2{
  	  color: #fff;
	}

	.blog .article-content h3{
	  margin:22px 0 10px;
	  font-size:21px;
	  line-height:1.25;
	  border-bottom: 0px;
	}

	.blog .article-content p,
	.blog .article-conclusion p{
	  margin:0 0 14px;
	  font-size:17px;
	  line-height:1.75;
	  color:#374151;
	}

	.blog .article-content ul,
	.blog .article-conclusion ul{
	  margin:0 0 16px 20px;
	  padding:0;
	}

	.blog .article-content li,
	.blog .article-conclusion li{
	  margin:0 0 8px;
	  font-size:17px;
	  line-height:1.65;
	  color:#374151;
	}

	.blog .article-content a,
	.blog .article-conclusion a{
	  color:#0f5cc0;
	  text-decoration:underline;
	}

	.blog .article-conclusion{
	  margin:10px 28px 28px;
	  background:#111827;
	  color:#fff;
	  border-radius:18px;
	  padding:22px;
	}

	.blog .article-conclusion p,
	.blog .article-conclusion li,
	.blog .article-conclusion a{
	  color:#e5e7eb;
	}

    .rich-field{margin-bottom:14px}
    .rich-toolbar{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-bottom:8px;
    }
    .rich-toolbar button{
      background:#eef2f7;
      color:#1f2937;
      padding:7px 10px;
      font-size:13px;
      border:1px solid #d5dde7;
    }
    .rich-editor{
      width:100%;
      min-height:120px;
      background:#fff;
      border:1px solid #cfd8e3;
      border-radius:12px;
      padding:12px 13px;
      outline:none;
      line-height:1.65;
    }
    .rich-editor p{margin:0 0 12px}
    .rich-editor ul{margin:0 0 12px 20px}
    .rich-editor li{margin:0 0 6px}
    .rich-editor a{color:#0f5cc0;text-decoration:underline}
    .rich-note{font-size:12px;color:var(--muted);margin-top:6px}

	@media (max-width: 1180px){
	  .app{grid-template-columns:1fr;}
	  .preview-panel{
		position:static;
		top:auto;
	  }
	  .preview-panel .preview-wrap{
		max-height:none;
		overflow:visible;
	  }
	}