* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		body {
			font-family: 'Plus Jakarta Sans', sans-serif;
			background: #0b0c10;
			color: #e2e8f0;
		}

		:root {
			--gold: #d4af37;
			--gold-light: #f3e5ab;
			--dark-1: #0b0c10;
			--dark-2: #12131a;
			--dark-3: #1a1c23;
			--border-gold: rgba(212, 175, 55, 0.2);
		}

		.app {
			display: flex;
			flex-direction: column;
			height: 100vh;
			min-height: 600px;
		}

		.app-header {
			background: #0f1016;
			border-bottom: 1px solid var(--border-gold);
			padding: 10px 16px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-shrink: 0;
		}

		.app-header-left {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.app-header-icon {
			background: linear-gradient(135deg, var(--gold), #aa7c11);
			border-radius: 8px;
			padding: 7px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.app-header-icon i {
			font-size: 18px;
			color: #1a1200;
		}

		.app-title {
			font-size: 14px;
			font-weight: 700;
			color: var(--gold);
			letter-spacing: 1px;
		}

		.app-subtitle {
			font-size: 10px;
			color: #94a3b8;
			margin-top: 1px;
		}

		.badge {
			display: flex;
			align-items: center;
			gap: 6px;
			background: #1a1c23;
			border: 1px solid var(--border-gold);
			border-radius: 8px;
			padding: 5px 10px;
			font-size: 10px;
			color: #cbd5e1;
			font-weight: 600;
			letter-spacing: 1px;
		}

		.badge-dot {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: var(--gold);
			animation: pulse 1.5s infinite;
		}

		@keyframes pulse {

			0%,
			100% {
				opacity: 1
			}

			50% {
				opacity: 0.4
			}
		}

		.app-main {
			display: flex;
			flex: 1;
			overflow: hidden;
		}

		/* LEFT PANEL */
		.panel-left {
			width: 380px;
			flex-shrink: 0;
			background: var(--dark-2);
			border-right: 1px solid var(--border-gold);
			overflow-y: auto;
			padding: 16px;
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

		.panel-left::-webkit-scrollbar {
			width: 4px;
		}

		.panel-left::-webkit-scrollbar-thumb {
			background: var(--gold);
			border-radius: 2px;
		}

		.form-section {
			background: var(--dark-3);
			border: 1px solid var(--border-gold);
			border-radius: 10px;
			padding: 14px;
		}

		.section-label {
			font-size: 10px;
			font-weight: 700;
			color: var(--gold);
			text-transform: uppercase;
			letter-spacing: 1.5px;
			margin-bottom: 12px;
			padding-bottom: 8px;
			border-bottom: 1px solid #1e2130;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.input-group {
			margin-bottom: 10px;
		}

		.input-group:last-child {
			margin-bottom: 0;
		}

		.input-label {
			font-size: 10px;
			color: #94a3b8;
			margin-bottom: 4px;
			display: block;
		}

		.form-input {
			width: 100%;
			background: var(--dark-2);
			border: 1px solid #2d2f3e;
			color: #e2e8f0;
			font-size: 12px;
			padding: 7px 10px;
			border-radius: 7px;
			outline: none;
			transition: border-color 0.2s;
			font-family: inherit;
		}

		.form-input:focus {
			border-color: var(--gold);
		}

		.form-input::placeholder {
			color: #94a3b8;
		}

		textarea.form-input {
			resize: vertical;
			min-height: 80px;
		}

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

		.btn-add {
			background: var(--gold);
			color: #1a1200;
			border: none;
			border-radius: 6px;
			padding: 4px 10px;
			font-size: 10px;
			font-weight: 700;
			cursor: pointer;
			display: flex;
			align-items: center;
			gap: 4px;
			transition: background 0.2s;
		}

		.btn-add:hover {
			background: var(--gold-light);
		}

		.btn-add i {
			font-size: 12px;
		}

		.agenda-card {
			background: var(--dark-2);
			border: 1px solid #2d2f3e;
			border-radius: 8px;
			padding: 10px;
			margin-bottom: 8px;
		}

		.agenda-card:last-child {
			margin-bottom: 0;
		}

		.agenda-card-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 8px;
		}

		.agenda-card-title {
			font-size: 10px;
			font-weight: 700;
			color: var(--gold);
		}

		.btn-remove {
			background: none;
			border: none;
			color: #f87171;
			cursor: pointer;
			font-size: 10px;
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 3px;
		}

		.btn-remove i {
			font-size: 12px;
		}

		.checkbox-row {
			display: flex;
			align-items: center;
			gap: 6px;
			margin-top: 6px;
		}

		.checkbox-row input {
			accent-color: var(--gold);
		}

		.checkbox-row label {
			font-size: 10px;
			color: #94a3b8;
			cursor: pointer;
		}

		/* RICH TEXT EDITOR */
		.rte-toolbar {
			display: flex;
			align-items: center;
			gap: 2px;
			flex-wrap: wrap;
			background: #0f1016;
			border: 1px solid #2d2f3e;
			border-bottom: none;
			border-radius: 6px 6px 0 0;
			padding: 4px 6px;
		}

		.rte-btn {
			background: none;
			border: none;
			color: #94a3b8;
			cursor: pointer;
			border-radius: 4px;
			padding: 3px 5px;
			font-size: 12px;
			font-weight: 700;
			line-height: 1;
			transition: all 0.15s;
			font-family: serif;
			min-width: 22px;
			text-align: center;
		}

		.rte-btn:hover {
			background: rgba(212, 175, 55, 0.15);
			color: var(--gold);
		}

		.rte-btn.active {
			background: rgba(212, 175, 55, 0.2);
			color: var(--gold);
		}

		.rte-sep {
			width: 1px;
			height: 16px;
			background: #2d2f3e;
			margin: 0 3px;
			flex-shrink: 0;
		}

		.rte-editor {
			width: 100%;
			background: var(--dark-2);
			border: 1px solid #2d2f3e;
			color: #ffffff;
			font-size: 12px;
			padding: 7px 10px;
			border-radius: 0 0 7px 7px;
			outline: none;
			font-family: inherit;
			min-height: 100px;
			max-height: 300px;
			overflow-y: auto;
			transition: border-color 0.2s;
			line-height: 1.6;
		}

		.rte-editor:focus {
			border-color: var(--gold);
		}

		.rte-editor ul {
			padding-left: 18px;
			margin: 2px 0;
			list-style-type: disc;
		}

		.rte-editor ol {
			padding-left: 18px;
			margin: 2px 0;
			list-style-type: decimal;
		}

		.rte-editor li {
			margin: 1px 0;
		}

		.rte-editor:empty:before {
			content: attr(data-placeholder);
			color: #94a3b8;
			pointer-events: none;
		}

		/* RIGHT PANEL */
		.panel-right {
			flex: 1;
			background: #090a0d;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		.preview-header {
			background: var(--dark-2);
			border-bottom: 1px solid var(--border-gold);
			padding: 10px 16px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-shrink: 0;
		}

		.preview-label {
			display: flex;
			align-items: center;
			gap: 6px;
			color: var(--gold);
			font-size: 11px;
			font-weight: 700;
			letter-spacing: 1px;
		}

		.preview-label i {
			font-size: 14px;
		}

		.preview-actions {
			display: flex;
			gap: 6px;
		}

		.btn-action {
			display: flex;
			align-items: center;
			gap: 5px;
			padding: 6px 12px;
			border-radius: 7px;
			font-size: 11px;
			font-weight: 700;
			cursor: pointer;
			border: none;
			transition: all 0.2s;
			font-family: inherit;
		}

		.btn-action i {
			font-size: 13px;
		}

		.btn-wa {
			background: rgba(255, 255, 255, 0.05);
			border: 1px solid var(--border-gold) !important;
			color: #cbd5e1;
		}

		.btn-wa:hover {
			background: var(--gold);
			color: #1a1200;
		}

		.btn-docx {
			background: rgba(37, 99, 235, 0.15);
			border: 1px solid rgba(59, 130, 246, 0.5) !important;
			color: #93c5fd;
			font-weight: 700;
		}

		.btn-docx:hover:not(:disabled) {
			background: #2563eb;
			color: #fff;
			border-color: #2563eb !important;
		}

		.btn-docx:disabled {
			opacity: 0.6;
			cursor: wait;
		}

		.btn-dl-pdf {
			background: rgba(220, 38, 38, 0.15);
			border: 1px solid rgba(239, 68, 68, 0.5) !important;
			color: #fca5a5;
			font-weight: 700;
		}

		.btn-dl-pdf:hover:not(:disabled) {
			background: #dc2626;
			color: #fff;
			border-color: #dc2626 !important;
		}

		.btn-dl-pdf:disabled {
			opacity: 0.6;
			cursor: wait;
		}

		.btn-print {
			background: var(--gold);
			color: #1a1200;
		}

		.btn-print:hover {
			background: var(--gold-light);
		}

		.preview-scroll {
			flex: 1;
			overflow-y: auto;
			padding: 24px;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 12px;
		}

		.preview-scroll::-webkit-scrollbar {
			width: 4px;
		}

		.preview-scroll::-webkit-scrollbar-thumb {
			background: var(--gold);
			border-radius: 2px;
		}

		/* A4 PAGES */
		.a4-page {
			width: 794px;
			min-height: 1123px;
			background: #fff;
			color: #000;
			font-family: 'Times New Roman', serif;
			font-size: 11pt;
			padding: 40px 50px;
			position: relative;
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
		}

		.a4-page-content {
			flex: 1;
		}

		.a4-page-footer {
			margin-top: auto;
			padding-top: 20px;
		}

		.page-label {
			font-size: 10px;
			color: #666;
			text-align: center;
			padding: 4px 0;
			background: #1a1c23;
			border-radius: 4px;
			color: #94a3b8;
			width: 794px;
		}

		/* DOC STYLES (inside a4-page) */
		.doc-kop {
			text-align: center;
			padding-bottom: 12px;
			border-bottom: 2px solid #000;
			margin-bottom: 16px;
		}

		.doc-kop h3 {
			font-size: 13pt;
			font-weight: 700;
			font-family: Arial, sans-serif;
			text-transform: uppercase;
		}

		.doc-kop p {
			font-size: 10pt;
			font-family: Arial, sans-serif;
			margin-top: 2px;
		}

		.doc-title {
			text-align: center;
			margin: 14px 0;
		}

		.doc-title h2 {
			font-size: 12pt;
			font-weight: 700;
			text-decoration: underline;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-family: Arial, sans-serif;
		}

		.doc-meta {
			margin-bottom: 12px;
		}

		.doc-meta table {
			width: 100%;
			border-collapse: collapse;
			font-size: 10.5pt;
			font-family: Arial, sans-serif;
		}

		.doc-meta td {
			padding: 2px 0;
			vertical-align: top;
		}

		.doc-meta .col-key {
			width: 32%;
			font-weight: 600;
		}

		.doc-meta .col-sep {
			width: 3%;
			text-align: center;
		}

		.doc-divider {
			border: none;
			border-top: 1px solid #aaa;
			margin: 10px 0;
		}

		.doc-section-title {
			font-size: 10.5pt;
			font-weight: 700;
			font-family: Arial, sans-serif;
			text-transform: uppercase;
			border-bottom: 1px solid #ccc;
			padding-bottom: 4px;
			margin: 14px 0 6px;
			display: flex;
			align-items: center;
			gap: 6px;
		}

		.doc-section-accent {
			width: 5px;
			height: 14px;
			background: var(--gold);
			border-radius: 2px;
			display: inline-block;
			flex-shrink: 0;
		}

		.doc-body {
			font-size: 10.5pt;
			font-family: Arial, sans-serif;
			text-align: justify;
			line-height: 1.6;
			color: #000;
			padding-left: 12px;
		}

		.doc-body ul {
			padding-left: 20px;
			margin: 4px 0;
			list-style-type: disc;
		}

		.doc-body ol {
			padding-left: 20px;
			margin: 4px 0;
			list-style-type: decimal;
		}

		.doc-body li {
			margin: 2px 0;
		}

		.doc-action-table {
			width: 100%;
			border-collapse: collapse;
			font-size: 9.5pt;
			font-family: Arial, sans-serif;
			margin-top: 8px;
		}

		.doc-action-table th {
			background: #f1f5f9;
			border: 1px solid #9ca3af;
			padding: 5px 7px;
			text-align: left;
			font-weight: 700;
		}

		.doc-action-table td {
			border: 1px solid #9ca3af;
			padding: 5px 7px;
			vertical-align: top;
		}

		.doc-action-table td:first-child {
			text-align: center;
		}

		.doc-action-table td:last-child {
			text-align: center;
		}

		.doc-ttd {
			margin-top: 32px;
			display: flex;
			justify-content: flex-end;
		}

		.doc-ttd-box {
			text-align: center;
			width: 220px;
			font-family: Arial, sans-serif;
			font-size: 10.5pt;
		}

		.doc-ttd-space {
			height: 64px;
		}

		.doc-ttd-name {
			font-weight: 700;
			text-decoration: underline;
		}