/* Signing Documents Avalist — Frontend Styles
   Avalist frontend tokens: accent #9BC269, radius 4px/8px */

/* ======================================================
   CSS VARIABLES (design tokens)
   ====================================================== */
:root {
	--sda-surface:       #ffffff;
	--sda-surface-soft:  #f6f6f6;
	--sda-text:          #141414;
	--sda-muted:         #5d5d5d;
	--sda-accent:        #9BC269;
	--sda-accent-strong: #7a9d4e;
	--sda-accent-soft:   #eaf2d8;
	--sda-border:        #eaeaea;
	--sda-danger:        #dc2626;
	--sda-success:       #1b6b3a;
	--sda-warning:       #7a4f0a;
	--sda-shadow:        0 0 30px 5px rgba(74, 74, 74, 0.10);
	--sda-radius:        8px;
	--sda-radius-sm:     4px;
	--sda-transition:    0.3s ease;
}

/* ======================================================
   SHELL
   ====================================================== */
.sda-shell {
	position: relative;
	width:      min(1180px, 100%);
	max-width:  calc(100vw - 32px);
	margin:     40px auto;
	padding:    clamp(22px, 3vw, 36px);
	border:     1px solid var(--sda-border);
	border-radius: 8px;
	background: #ffffff;
	box-shadow: var(--sda-shadow);
	box-sizing: border-box;
}

.sda-shell--pdf-text {
	width: 100%;
	max-width: none;
	margin: 24px 0;
	padding: clamp(18px, 2vw, 28px);
}

.sda-shell *,
.sda-shell *::before,
.sda-shell *::after {
	box-sizing: inherit;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sda-tool-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.sda-tool-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-height: 196px;
	padding: 22px 20px;
	border: 1px solid var(--sda-border);
	border-radius: 8px;
	background: #ffffff;
	color: var(--sda-text);
	text-align: left;
	font: inherit;
	text-transform: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(74, 74, 74, 0.06);
	transition: border-color var(--sda-transition), box-shadow var(--sda-transition);
}

.sda-tool-card:hover,
.sda-tool-card.is-active {
	border-color: var(--sda-accent);
	box-shadow: 0 4px 16px rgba(74, 74, 74, 0.12);
}

.sda-tool-card-icon {
	width: 58px;
	height: 58px;
	border-radius: 8px;
	background: #eaf2d8;
	border: 1px solid rgba(155, 194, 105, 0.12);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 28px 28px;
}

.sda-tool-card-title {
	font-size: 18px;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -0.01em;
	width: 100%;
	text-transform: none;
}

.sda-tool-card-copy {
	font-size: 14px;
	line-height: 1.55;
	letter-spacing: 0.01em;
	color: var(--sda-muted);
	width: 100%;
	text-transform: none;
}

.sda-tool-card-icon--merge {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BC269' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h6a4 4 0 0 1 4 4v6'/%3E%3Cpath d='m14 17 3 3 3-3'/%3E%3Cpath d='M17 7H7a4 4 0 0 0-4 4v6'/%3E%3Cpath d='m7 17-3 3-3-3' transform='translate(6 0)'/%3E%3C/svg%3E");
}

.sda-tool-card-icon--split {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BC269' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M8 7H5a2 2 0 0 0-2 2v2'/%3E%3Cpath d='M8 17H5a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M16 7h3a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M16 17h3a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E");
}

.sda-tool-card-icon--sign {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BC269' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17c4-4 6.5-5 9-5 2.2 0 4.1.8 6 2.4'/%3E%3Cpath d='m14 7 4-4 3 3-4 4'/%3E%3Cpath d='M13 8 6 15'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
}

.sda-tool-card-icon--convert {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BC269' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 14h8'/%3E%3Cpath d='m13 10 4 4-4 4'/%3E%3C/svg%3E");
}

.sda-tool-card-icon--rotate {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BC269' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2v5h-5'/%3E%3Cpath d='M7 22v-5h5'/%3E%3Cpath d='M20 12a8 8 0 0 0-13.66-5.66L4 9'/%3E%3Cpath d='M4 12a8 8 0 0 0 13.66 5.66L20 15'/%3E%3C/svg%3E");
}

.sda-tool-card-icon--delete {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BC269' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M6 7l1 13h10l1-13'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3C/svg%3E");
}

.sda-tool-card-icon--extract {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BC269' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M12 10v8'/%3E%3Cpath d='m8.5 14 3.5 4 3.5-4'/%3E%3C/svg%3E");
}

.sda-tool-card-icon--sort {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BC269' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h12'/%3E%3Cpath d='M8 12h9'/%3E%3Cpath d='M8 18h6'/%3E%3Cpath d='m4 8-2-2 2-2'/%3E%3Cpath d='M2 6h4'/%3E%3Cpath d='m4 16-2 2 2 2'/%3E%3Cpath d='M2 18h4'/%3E%3C/svg%3E");
}

@media (max-width: 1100px) {
	.sda-tool-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sda-tool-card-title {
		font-size: 16px;
	}
}

.sda-home-kicker {
	margin: 0;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: none;
}

.sda-home-title,
.sda-workspace-title {
	margin: 0;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.sda-home-sub {
	margin: 0;
	line-height: 1.55;
	letter-spacing: 0;
	max-width: none;
}

.sda-workspace-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.sda-workspace-copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.sda-back-btn {
	border: 2px solid var(--sda-border);
	border-radius: 4px;
	padding: 7px 11px;
	background: transparent;
	color: var(--sda-text);
	font: inherit;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	line-height: 1.15;
	white-space: nowrap;
	transition: border-color var(--sda-transition), color var(--sda-transition);
}

.sda-back-btn:hover {
	border-color: var(--sda-accent);
	color: var(--sda-accent);
}

/* ======================================================
   FORM LAYOUT (two columns)
   ====================================================== */
.sda-form {
	display:               grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
	gap:                   24px;
	align-items:           start;
}

.sda-form--catalog {
	grid-template-columns: 1fr;
}

.sda-form--pdf-tools {
	grid-template-columns: minmax(380px, 470px) minmax(0, 1fr);
}

.sda-form--pdf-tools .sda-panel--source {
	gap: 24px;
}

@media (max-width: 900px) {
	.sda-form--pdf-tools {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.sda-form {
		grid-template-columns: 1fr;
	}
	.sda-tool-grid {
		grid-template-columns: 1fr;
	}
	.sda-workspace-head {
		flex-direction: column;
		grid-template-columns: 1fr;
	}
	.sda-pdf-workspace-head {
		flex-direction: column;
	}
	.sda-pdf-toolbar {
		justify-content: flex-start;
	}
	.sda-toolbar-sep {
		display: none;
	}
	.sda-pdf-pages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sda-back-btn {
		width: auto;
		text-align: center;
	}
	.sda-panel {
		padding: 20px 16px;
	}
}

@media (max-width: 480px) {
	.sda-pdf-pages {
		grid-template-columns: 1fr;
	}
	.sda-shell {
		padding: 16px 14px;
	}
	.sda-pdf-page-actions {
		grid-template-columns: 1fr;
	}
}

/* ======================================================
   PANEL (card)
   ====================================================== */
.sda-panel {
	background:    var(--sda-surface);
	border:        1px solid var(--sda-border);
	border-radius: 8px;
	padding:       28px;
	box-shadow:    0 2px 8px rgba(74, 74, 74, 0.06);
	display:       grid;
	align-content: start;
	gap:           20px;
}

[data-sda-converter-controls],
.sda-pdf-tools-controls,
[data-sda-converter-result] {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

[hidden] {
	display: none !important;
}

/* ======================================================
   SECTION
   ====================================================== */
.sda-section {
	display:        flex;
	flex-direction: column;
	gap:            10px;
}

.sda-section-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.sda-section-header--stack {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 16px;
}

.sda-section-label {
	font-size:      13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--sda-muted);
	margin:         0;
	padding:        0;
}

.sda-mode-toggle {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.sda-mode-btn {
	flex: 1 1 140px;
	padding: 13px 16px;
	border: 2px solid var(--sda-border);
	border-radius: 4px;
	background: transparent;
	color: var(--sda-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color var(--sda-transition), color var(--sda-transition), background var(--sda-transition);
}

.sda-mode-btn:hover {
	border-color: var(--sda-accent);
	color: var(--sda-accent);
}

.sda-mode-btn.is-active {
	background: var(--sda-accent-soft);
	border-color: var(--sda-accent);
	color: var(--sda-accent-strong);
}

.sda-signing-options {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sda-pdf-tools-controls .sda-mode-btn {
	min-height: 44px;
}

.sda-tool-picker .sda-mode-btn {
	flex: 1 1 180px;
}

.sda-tool-copy {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--sda-muted);
}

.sda-tool-copy--soft {
	color: var(--sda-accent-strong);
}

.sda-option-card {
	padding: 14px 16px;
	border: 1px solid var(--sda-border);
	border-radius: var(--sda-radius-sm);
	background: var(--sda-surface-soft);
}

.sda-check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sda-text);
	cursor: pointer;
}

.sda-check input {
	width: 18px;
	height: 18px;
	accent-color: var(--sda-accent);
}

/* ======================================================
   UPLOAD ZONE
   ====================================================== */
.sda-upload-zone {
	border:         2px dashed #becbd2;
	border-radius:  var(--sda-radius-sm);
	padding:        24px 20px;
	text-align:     center;
	cursor:         pointer;
	transition:     border-color var(--sda-transition), background var(--sda-transition);
	background:     var(--sda-surface-soft);
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
	position:       relative;
}

.sda-upload-zone:hover,
.sda-upload-zone:focus-within,
.sda-upload-zone:focus {
	border-color: var(--sda-accent);
	background:   var(--sda-accent-soft);
	outline:      none;
}

.sda-upload-zone.is-dragover {
	border-color: var(--sda-accent);
	background:   var(--sda-accent-soft);
}

.sda-upload-zone--docs {
	padding: 24px 22px;
}

.sda-file-input {
	position: absolute;
	inset:    0;
	opacity:  0;
	width:    100%;
	height:   100%;
	cursor:   pointer;
	font-size: 0;
}

.sda-upload-icon {
	font-size: 54px;
	line-height: 1;
	pointer-events: none;
	font-weight: 300;
	letter-spacing: -0.05em;
	color: var(--sda-accent-strong);
}

.sda-upload-title {
	font-size:   15px;
	font-weight: 600;
	line-height: 1.55;
	color:       var(--sda-text);
	margin:      0;
	pointer-events: none;
	max-width:   26ch;
}

.sda-upload-link {
	color:       var(--sda-accent);
	font-weight: 700;
}

.sda-upload-hint {
	font-size: 13px;
	line-height: 1.5;
	color:     var(--sda-muted);
	margin:    0;
	pointer-events: none;
	max-width: 30ch;
}

/* ======================================================
   SIGNATURE PREVIEW
   ====================================================== */
.sda-sig-preview {
	border:        1px solid var(--sda-border);
	border-radius: var(--sda-radius-sm);
	overflow:      hidden;
	background:    #fafafa;
}

.sda-sig-preview-inner {
	display:         flex;
	justify-content: center;
	align-items:     center;
	padding:         20px;
	min-height:      80px;
	background:      repeating-conic-gradient(#e8e8e8 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}

.sda-sig-img {
	max-width:  100%;
	max-height: 120px;
	display:    block;
	object-fit: contain;
}

.sda-sig-meta {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         8px 12px;
	background:      var(--sda-surface-soft);
	border-top:      1px solid var(--sda-border);
	gap:             8px;
}

.sda-sig-filename {
	font-size:    12px;
	color:        var(--sda-muted);
	white-space:  nowrap;
	overflow:     hidden;
	text-overflow: ellipsis;
}

.sda-sig-toggle {
	display:    flex;
	gap:        6px;
	flex-wrap:  wrap;
	order:      -1;
}

.sda-sig-toggle-btn {
	font-size:      11px;
	font-weight:    600;
	padding:        4px 10px;
	border:         1px solid var(--sda-border);
	border-radius:  var(--sda-radius-sm);
	background:     #fff;
	color:          var(--sda-muted);
	cursor:         pointer;
	transition:     border-color var(--sda-transition), color var(--sda-transition), background var(--sda-transition);
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	font-family:    inherit;
	line-height:    1.2;
}

.sda-sig-toggle-btn:hover:not(.is-active) {
	border-color:  var(--sda-accent);
	color:         var(--sda-accent);
}

.sda-sig-toggle-btn.is-active {
	background:    var(--sda-accent-soft);
	border-color:  var(--sda-accent);
	color:         var(--sda-accent-strong);
	font-weight:   700;
}

/* ======================================================
   FILE LIST
   ====================================================== */
.sda-file-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        4px;
}

.sda-docs-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.sda-docs-summary-item {
	padding: 12px 14px;
	border-radius: 4px;
	background: #f8f8f8;
	border: 1px solid var(--sda-border);
}

.sda-docs-summary-value {
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: var(--sda-text);
}

.sda-docs-summary-label {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--sda-muted);
}

.sda-file-item {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       7px 10px;
	border:        1px solid var(--sda-border);
	border-radius: var(--sda-radius-sm);
	background:    var(--sda-surface-soft);
	font-size:     12px;
	transition:    background var(--sda-transition);
}

.sda-file-item:hover {
	background: var(--sda-accent-soft);
}

.sda-file-item.is-dragging {
	opacity: 0.55;
}

.sda-file-drag {
	flex-shrink: 0;
	color: var(--sda-muted);
	font-size: 14px;
	line-height: 1;
	cursor: grab;
}

.sda-file-ext {
	flex-shrink:   0;
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	width:         36px;
	height:        22px;
	border-radius: 4px;
	font-size:     10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color:         #fff;
	background:    var(--sda-muted);
}

.sda-file-ext--docx { background: #2d6abf; }
.sda-file-ext--xlsx { background: #1e7a45; }
.sda-file-ext--pdf  { background: #c0392b; }
.sda-file-ext--png,
.sda-file-ext--jpg,
.sda-file-ext--jpeg,
.sda-file-ext--webp,
.sda-file-ext--bmp,
.sda-file-ext--gif,
.sda-file-ext--svg  { background: #7a4f0a; }
.sda-file-ext--txt,
.sda-file-ext--csv  { background: #546560; }

.sda-file-name {
	flex:          1;
	min-width:     0;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	color:         var(--sda-text);
}

.sda-file-size {
	flex-shrink: 0;
	color:       var(--sda-muted);
	font-size:   11px;
}

.sda-file-remove {
	flex-shrink:   0;
	width:         22px;
	height:        22px;
	border:        none;
	background:    transparent;
	color:         var(--sda-muted);
	cursor:        pointer;
	border-radius: 50%;
	font-size:     16px;
	line-height:   1;
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    color var(--sda-transition), background var(--sda-transition);
	padding:       0;
}

.sda-file-order {
	flex-shrink:   0;
	width:         22px;
	height:        22px;
	border:        1px solid var(--sda-border);
	background:    #fff;
	color:         var(--sda-muted);
	cursor:        pointer;
	border-radius: 50%;
	font-size:     13px;
	line-height:   1;
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    color var(--sda-transition), border-color var(--sda-transition), background var(--sda-transition);
	padding:       0;
}

.sda-file-order:hover {
	color: var(--sda-accent);
	border-color: var(--sda-accent);
	background: var(--sda-accent-soft);
}

.sda-file-order:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.sda-file-remove:hover {
	color:       var(--sda-danger);
	background:  rgba(220, 38, 38, 0.08);
}

/* ======================================================
   ADVANCED / COLLAPSIBLE
   ====================================================== */
.sda-advanced {
	border:        1px solid var(--sda-border);
	border-radius: var(--sda-radius-sm);
	background:    var(--sda-surface-soft);
}

.sda-advanced-toggle {
	display:       flex;
	align-items:   center;
	justify-content: space-between;
	padding:       10px 14px;
	cursor:        pointer;
	font-size:     12px;
	font-weight:   700;
	color:         var(--sda-accent);
	user-select:   none;
	list-style:    none;
	border-radius: var(--sda-radius-sm);
	transition:    background var(--sda-transition);
}

.sda-advanced-toggle::-webkit-details-marker { display: none; }

.sda-advanced-toggle::after {
	content:     '+';
	font-size:   16px;
	font-weight: 400;
	color:       var(--sda-muted);
}

.sda-advanced[open] .sda-advanced-toggle::after {
	content: '−';
}

.sda-advanced-toggle:hover {
	background: var(--sda-accent-soft);
}

.sda-advanced-body {
	padding:    0 14px 14px;
	display:    flex;
	flex-direction: column;
	gap:        10px;
}

.sda-field-row {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.sda-field-row--stack {
	align-items: flex-start;
}

.sda-field-label {
	flex-shrink: 0;
	font-size:   12px;
	font-weight: 600;
	color:       var(--sda-text);
	min-width:   130px;
}

.sda-select {
	flex:          1;
	padding:       6px 10px;
	border:        1px solid #becbd2;
	border-radius: var(--sda-radius-sm);
	background:    var(--sda-surface);
	color:         var(--sda-text);
	font-family:   inherit;
	font-size:     13px;
	cursor:        pointer;
	transition:    border-color var(--sda-transition);
	appearance:    none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235d5d5d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 10px center;
	padding-right:  30px;
}

.sda-select:focus {
	outline:      none;
	border-color: var(--sda-accent);
	box-shadow:   0 0 0 3px rgba(155, 194, 105, 0.12);
}

.sda-input {
	flex:          1;
	width:         100%;
	padding:       8px 10px;
	border:        1px solid #becbd2;
	border-radius: var(--sda-radius-sm);
	background:    transparent;
	color:         var(--sda-text);
	font-family:   inherit;
	font-size:     13px;
	transition:    border-color var(--sda-transition), box-shadow var(--sda-transition);
}

.sda-input:focus {
	outline:      none;
	border-color: var(--sda-accent);
	box-shadow:   0 0 0 3px rgba(155, 194, 105, 0.12);
	background:   #fff;
}

.sda-field-note {
	margin: -4px 0 0 140px;
	font-size: 11px;
	color: var(--sda-muted);
}

.sda-radio-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sda-radio {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--sda-text);
}

.sda-radio input {
	accent-color: var(--sda-accent);
}

/* ======================================================
   BUTTONS
   ====================================================== */
.sda-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	padding:         10px 20px;
	border:          2px solid transparent;
	border-radius:   var(--sda-radius-sm);
	font-family:     inherit;
	font-size:       13px;
	font-weight:     700;
	text-transform:  uppercase;
	letter-spacing:  0.5px;
	cursor:          pointer;
	transition:      background var(--sda-transition), color var(--sda-transition), border-color var(--sda-transition);
	white-space:     nowrap;
	text-decoration: none;
}

.sda-btn--primary {
	background: var(--sda-accent);
	color:      #fff;
	border-color: var(--sda-accent);
}

.sda-btn--primary:hover:not(:disabled) {
	background:   transparent;
	color:        var(--sda-accent);
}

.sda-btn--primary:disabled {
	opacity: 0.45;
	cursor:  not-allowed;
}

.sda-btn--ghost {
	background:  transparent;
	color:       var(--sda-accent);
	border-color: var(--sda-border);
}

.sda-btn--ghost:hover:not(:disabled) {
	background:   var(--sda-accent-soft);
	border-color: var(--sda-accent);
}

.sda-btn--sm {
	padding:   7px 12px;
	font-size: 12px;
}

.sda-btn--full {
	width: 100%;
}

/* ======================================================
   RESULT PANEL
   ====================================================== */
.sda-panel--result {
	min-height:      320px;
	justify-content: center;
}

.sda-form--catalog .sda-panel--result {
	display: none;
}

.sda-form--pdf-tools .sda-panel--result {
	justify-content: flex-start;
	min-height: 620px;
	padding: 22px;
	position: sticky;
	top: 24px;
}

/* Empty state */
.sda-result-empty {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	text-align:     center;
	gap:            10px;
	padding:        20px;
	flex:           1;
}

.sda-result-empty-icon {
	font-size: 40px;
	line-height: 1;
}

.sda-result-empty-title {
	font-size:   18px;
	font-weight: 700;
	color:       var(--sda-text);
	margin:      0;
}

.sda-result-empty-sub {
	font-size: 15px;
	line-height: 1.6;
	color:     var(--sda-muted);
	margin:    0;
}

/* Progress state */
.sda-result-progress {
	display:        flex;
	flex-direction: column;
	gap:            12px;
	flex:           1;
	min-height:     240px;
}

.sda-progress-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.sda-progress-label {
	font-size:   13px;
	font-weight: 600;
	color:       var(--sda-text);
}

.sda-progress-track {
	height:        8px;
	background:    #eaeaea;
	border-radius: 99px;
	border:        1px solid var(--sda-border);
	overflow:      hidden;
}

.sda-progress-fill {
	height:        100%;
	background:    linear-gradient(90deg, var(--sda-accent-strong), var(--sda-accent));
	border-radius: 99px;
	transition:    width 400ms ease;
}

/* File results list */
.sda-file-results {
	display:        flex;
	flex-direction: column;
	gap:            6px;
	margin-top:     4px;
}

.sda-file-result {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       6px 10px;
	border-radius: var(--sda-radius-sm);
	font-size:     12px;
	border:        1px solid transparent;
}

.sda-file-result--processing {
	background:   #f6f6f6;
	border-color: var(--sda-border);
}

.sda-file-result--ok {
	background:   rgba(27, 107, 58, 0.06);
	border-color: rgba(27, 107, 58, 0.2);
}

.sda-file-result--error {
	background:   rgba(220, 38, 38, 0.06);
	border-color: rgba(220, 38, 38, 0.2);
}

.sda-file-result-icon {
	flex-shrink: 0;
	font-size:   14px;
}

.sda-file-result-name {
	flex:          1;
	min-width:     0;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	color:         var(--sda-text);
}

.sda-file-result-msg {
	font-size: 11px;
	color:     var(--sda-danger);
	flex-shrink: 0;
}

/* Done state */
.sda-result-done {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	gap:            12px;
	text-align:     center;
	flex:           1;
}

.sda-done-icon {
	font-size: 40px;
}

.sda-done-title {
	font-size:   16px;
	font-weight: 700;
	color:       var(--sda-text);
	margin:      0;
}

.sda-done-sub {
	font-size: 13px;
	color:     var(--sda-muted);
	margin:    0;
}

.sda-done-actions {
	display:     flex;
	gap:         10px;
	flex-wrap:   wrap;
	justify-content: center;
}

/* ======================================================
   PDF TOOLS WORKSPACE
   ====================================================== */
.sda-pdf-workspace,
.sda-pdf-active {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	min-height: 100%;
}

.sda-pdf-empty {
	display: flex;
	flex: 1;
	min-height: 420px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	padding: 24px;
	border: 1px dashed #becbd2;
	border-radius: var(--sda-radius-sm);
	background: var(--sda-surface-soft);
}

.sda-pdf-workspace-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding-bottom: 6px;
	border-bottom: 1px solid #eaeaea;
}

.sda-pdf-title,
.sda-pdf-subtitle {
	margin: 0;
}

.sda-pdf-title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--sda-text);
}

.sda-pdf-subtitle {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sda-muted);
}

.sda-pdf-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
}

.sda-toolbar-sep {
	width: 1px;
	height: 20px;
	background: var(--av-border, rgba(255,255,255,.15));
	margin: 0 2px;
	flex-shrink: 0;
}

.sda-pdf-tools-controls .sda-workspace-title {
	font-size: clamp(18px, 2vw, 28px);
	line-height: 0.98;
	max-width: none;
}

.sda-pdf-tools-controls .sda-home-sub {
	font-size: 14px;
	line-height: 1.6;
	max-width: none;
}

.sda-pdf-tools-controls .sda-tool-copy {
	font-size: 16px;
	line-height: 1.7;
	max-width: 34ch;
}

.sda-pdf-tools-controls .sda-mode-toggle {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.sda-pdf-tools-controls .sda-mode-toggle .sda-mode-btn:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.sda-pdf-message {
	padding: 10px 12px;
	border: 1px solid var(--sda-border);
	border-radius: var(--sda-radius-sm);
	background: var(--sda-surface-soft);
	color: var(--sda-muted);
	font-size: 12px;
	font-weight: 700;
}

.sda-pdf-pages {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
	gap: 16px;
	align-items: start;
}

.sda-pdf-page {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 14px;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	background: #f8f8f8;
	box-shadow: 0 2px 8px rgba(74, 74, 74, 0.06);
	transition: opacity var(--sda-transition), border-color var(--sda-transition);
}

.sda-pdf-page.is-selected {
	border-color: var(--sda-accent);
	box-shadow: 0 4px 16px rgba(155, 194, 105, 0.12);
}

.sda-pdf-page.is-deleted {
	opacity: 0.46;
	background: #f6f6f6;
}

.sda-pdf-page[draggable="true"] {
	cursor: grab;
}

.sda-pdf-page-select {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--sda-text);
}

.sda-pdf-page-select input {
	width: 16px;
	height: 16px;
	accent-color: var(--sda-accent);
	flex: 0 0 auto;
}

.sda-pdf-page-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1.34;
	overflow: hidden;
	border: 1px solid #eaeaea;
	border-radius: 4px;
	background: #f6f6f6;
}

.sda-pdf-page-preview img {
	max-width: 100%;
	max-height: 100%;
	display: block;
	transform-origin: center;
}

.sda-pdf-page-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--sda-muted);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.sda-pdf-page-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 11px;
	color: var(--sda-muted);
}

.sda-pdf-page-file {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sda-pdf-page-rotation {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--sda-accent);
}

.sda-pdf-page-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.sda-pdf-page-actions button {
	min-height: 38px;
	border: 1px solid var(--sda-border);
	border-radius: 4px;
	background: #fff;
	color: var(--sda-text);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	padding: 0 10px;
	transition: border-color var(--sda-transition), color var(--sda-transition), background var(--sda-transition);
}

.sda-pdf-page-actions button:hover {
	border-color: var(--sda-accent);
	color: var(--sda-accent);
	background: var(--sda-accent-soft);
}

.sda-pdf-page-actions button[data-pdf-page-delete],
.sda-pdf-page-actions button[data-pdf-page-restore] {
	grid-column: 1 / -1;
}

.sda-pdf-page-actions button[data-pdf-page-rotate-left],
.sda-pdf-page-actions button[data-pdf-page-rotate-right] {
	font-size: 16px;
	line-height: 1;
}

.sda-pdf-done {
	padding: 16px;
	border: 1px solid rgba(27, 107, 58, 0.2);
	border-radius: var(--sda-radius-sm);
	background: rgba(27, 107, 58, 0.06);
	text-align: center;
}

/* ======================================================
   TOAST
   ====================================================== */
.sda-toast-stack {
	position: fixed;
	bottom:   24px;
	right:    24px;
	z-index:  9999;
	display:  flex;
	flex-direction: column;
	gap:      8px;
	pointer-events: none;
}

.sda-toast {
	padding:       10px 16px;
	border-radius: var(--sda-radius-sm);
	font-size:     13px;
	font-weight:   600;
	color:         #fff;
	background:    var(--sda-text);
	box-shadow:    0 4px 16px rgba(0,0,0,0.18);
	opacity:       0;
	transform:     translateY(8px);
	transition:    opacity 200ms ease, transform 200ms ease;
	pointer-events: auto;
	max-width:     340px;
}

.sda-toast.is-visible {
	opacity:   1;
	transform: translateY(0);
}

.sda-toast--success { background: var(--sda-success); }
.sda-toast--error   { background: var(--sda-danger); }
.sda-toast--info    { background: var(--sda-accent); }

/* ======================================================
   EDITOR
   ====================================================== */
.sda-editor-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(16, 28, 24, 0.72);
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sda-editor-dialog {
	width: min(1100px, 100%);
	max-height: calc(100vh - 48px);
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.28);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.sda-editor-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 14px;
	background: #f6f6f6;
	border-bottom: 1px solid #eaeaea;
}

.sda-editor-title,
.sda-editor-subtitle {
	margin: 0;
}

.sda-editor-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--sda-text);
}

.sda-editor-subtitle {
	margin-top: 4px;
	font-size: 13px;
	color: var(--sda-muted);
}

.sda-editor-close {
	border: none;
	background: transparent;
	color: var(--sda-muted);
	font-size: 22px;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

.sda-editor-tabs {
	display: flex;
	gap: 8px;
	padding: 14px 24px 0;
}

.sda-editor-tab {
	padding: 8px 14px;
	border: 1px solid var(--sda-border);
	border-radius: 4px;
	background: #fff;
	color: var(--sda-muted);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color var(--sda-transition), color var(--sda-transition), background var(--sda-transition);
}

.sda-editor-tab.is-active {
	background: var(--sda-accent);
	border-color: var(--sda-accent);
	color: #fff;
}

.sda-editor-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 18px;
	padding: 18px 24px 24px;
	min-height: 0;
	flex: 1;
}

.sda-editor-page-wrap {
	min-height: 0;
	overflow: auto;
	padding: 18px;
	border: 1px solid var(--sda-border);
	border-radius: 8px;
	background: #f6f6f6;
}

.sda-editor-canvas {
	position: relative;
	width: min(100%, 740px);
	margin: 0 auto;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(74, 74, 74, 0.12);
	overflow: hidden;
}

.sda-editor-page-img {
	display: block;
	width: 100%;
	height: auto;
}

.sda-editor-item {
	position: absolute;
	cursor: move;
	border: 2px solid rgba(155, 194, 105, 0.75);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.28);
	box-shadow: 0 4px 12px rgba(74, 74, 74, 0.15);
	touch-action: none;
	user-select: none;
}

.sda-editor-item--stamp {
	border-color: rgba(220, 38, 38, 0.7);
}

.sda-editor-item[hidden] {
	display: none;
}

.sda-editor-item-img {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.sda-editor-resize-handle {
	position: absolute;
	right: -10px;
	bottom: -10px;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: var(--sda-accent);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
	cursor: nwse-resize;
}

.sda-editor-item--stamp .sda-editor-resize-handle {
	background: var(--sda-danger);
}

.sda-editor-empty-note {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--sda-border);
	color: var(--sda-muted);
	font-size: 12px;
	box-shadow: 0 4px 12px rgba(74, 74, 74, 0.10);
}

.sda-editor-controls {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 18px;
	border: 1px solid var(--sda-border);
	border-radius: 8px;
	background: #fff;
}

.sda-editor-control-grid {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sda-editor-control {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--sda-text);
}

.sda-editor-size-input {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid #becbd2;
	border-radius: 4px;
	font-family: inherit;
	font-size: 14px;
	color: var(--sda-text);
	background: transparent;
}

.sda-editor-size-input:focus {
	outline: none;
	border-color: var(--sda-accent);
	box-shadow: 0 0 0 3px rgba(155, 194, 105, 0.12);
	background: #fff;
}

.sda-editor-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 600px) {
	.sda-panel {
		padding: 18px 16px;
	}
	.sda-done-actions {
		flex-direction: column;
		width: 100%;
	}
	.sda-done-actions .sda-btn {
		width: 100%;
	}
	.sda-toast-stack {
		bottom: 12px;
		right:  12px;
		left:   12px;
	}
	.sda-toast {
		max-width: 100%;
	}
	.sda-field-row {
		flex-direction: column;
		align-items:    flex-start;
	}
	.sda-field-label {
		min-width: auto;
		width: 100%;
	}
	.sda-field-note {
		margin-left: 0;
	}
	.sda-select,
	.sda-input {
		width: 100%;
	}
	.sda-mode-btn {
		flex-basis: 100%;
	}
	.sda-docs-summary {
		grid-template-columns: 1fr;
	}
	.sda-btn {
		width: 100%;
		justify-content: center;
	}
	.sda-btn--sm {
		width: auto;
	}
	.sda-editor-overlay {
		padding: 12px;
	}
	.sda-editor-dialog {
		max-height: calc(100vh - 24px);
		border-radius: 8px;
	}
	.sda-editor-body {
		grid-template-columns: 1fr;
		padding: 14px;
	}
	.sda-editor-header,
	.sda-editor-tabs {
		padding-left: 14px;
		padding-right: 14px;
	}
	.sda-form--pdf-tools .sda-panel--result {
		position: relative;
		top: auto;
		min-height: 300px;
	}
}

/* ── Instruction blocks ─────────────────────────────── */
.sda-title-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sda-info-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--sda-muted);
	cursor: pointer;
	border-radius: 50%;
	transition: color var(--sda-transition), background var(--sda-transition);
	vertical-align: middle;
}
.sda-info-btn:hover,
.sda-info-btn[aria-expanded="true"] {
	color: var(--sda-accent-strong);
	background: var(--sda-accent-soft);
}

.sda-instr[hidden] { display: none !important; }

.sda-instr__inner {
	overflow: hidden;
	max-height: 0;
	transition: max-height 320ms cubic-bezier(.4,0,.2,1);
}
.sda-instr.is-open .sda-instr__inner { max-height: 800px; }

.sda-instr__card {
	padding: 16px 20px 20px;
	background: var(--sda-accent-soft);
	border: 1px solid rgba(155,194,105,.35);
	border-top: 3px solid var(--sda-accent);
	border-radius: var(--sda-radius);
	margin-top: 20px;
}
.sda-instr__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
.sda-instr__heading-icon {
	flex-shrink: 0;
	color: var(--sda-accent-strong);
	display: flex;
	align-items: center;
}
.sda-instr__heading {
	flex: 1;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sda-accent-strong);
}
.sda-instr__close {
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--sda-muted);
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--sda-transition), background var(--sda-transition);
}
.sda-instr__close:hover { color: var(--sda-text); background: rgba(0,0,0,.06); }

.sda-instr__body { font-size: 14px; line-height: 1.7; }
.sda-instr__body p { margin: 0 0 10px; }
.sda-instr__body p:last-child { margin-bottom: 0; }
.sda-instr__body ul,
.sda-instr__body ol { margin: 0 0 10px 1.2em; padding: 0; }
.sda-instr__body li { margin-bottom: 4px; }
.sda-instr__body strong { font-weight: 600; }
.sda-instr__body a { color: var(--sda-accent-strong); text-decoration: underline; }