/* ============================================================
   Dar Estimator — premium standalone embed styles
   ============================================================ */
.dar-ticket {
	--dar-navy: #0b1c33;
	--dar-navy-deep: #06101f;
	--dar-navy-soft: #152a45;
	--dar-amber: #f59e0b;
	--dar-amber-soft: #fbbf24;
	--dar-paper: #f6f4ef;
	--dar-ink: #1a2433;
	--dar-ink-soft: #5a6a7e;
	--dar-tape-line: #e2ddd3;
	--dar-radius: 18px;
	--dar-shadow: 0 18px 50px rgba(11, 28, 51, 0.14), 0 4px 12px rgba(11, 28, 51, 0.06);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: #fff;
	border: 1px solid var(--dar-tape-line);
	border-radius: var(--dar-radius);
	box-shadow: var(--dar-shadow);
	max-width: 440px;
	width: 100%;
	overflow: hidden;
	color: var(--dar-ink);
	line-height: 1.5;
	font-size: 14.5px;
	position: relative;
}

/* ----- Header ----- */
.dar-ticket-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--dar-navy) 0%, var(--dar-navy-soft) 100%);
	color: #fff;
}

.dar-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--dar-amber), #f97316);
	color: var(--dar-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 17px;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
	flex-shrink: 0;
}

.dar-ticket-head .who {
	flex: 1;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.dar-ticket-head .who strong {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.dar-ticket-head .who span {
	font-size: 11px;
	opacity: 0.75;
	letter-spacing: 0.05em;
	font-weight: 500;
}

.dar-status {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(255,255,255,0.1);
	padding: 4px 10px;
	border-radius: 999px;
	flex-shrink: 0;
}

.dar-status .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
	animation: dar-pulse 2s ease-in-out infinite;
}

.dar-status.inactive .dot {
	background: #94a3b8;
	box-shadow: none;
	animation: none;
}

@keyframes dar-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

.dar-perf {
	height: 3px;
	background: linear-gradient(90deg, var(--dar-amber), #f97316, var(--dar-amber-soft));
}

/* ----- Admin notice ----- */
.dar-notice {
	margin: 12px 14px 0;
	padding: 10px 12px;
	background: #fff7ed;
	border: 1px solid #fdba74;
	border-radius: 10px;
	font-size: 12.5px;
	line-height: 1.45;
	color: #9a3412;
}

/* ----- Chat log ----- */
.dar-log {
	height: 300px;
	overflow-y: auto;
	padding: 16px 14px;
	background: var(--dar-paper);
	scroll-behavior: smooth;
}

.dar-log::-webkit-scrollbar { width: 6px; }
.dar-log::-webkit-scrollbar-track { background: transparent; }
.dar-log::-webkit-scrollbar-thumb {
	background: #c8c2b6;
	border-radius: 3px;
}

/* Messages */
.dar-msg {
	margin-bottom: 14px;
	padding: 12px 14px;
	border-radius: 14px;
	max-width: 94%;
	line-height: 1.55;
	font-size: 14px;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

.dar-msg.user {
	background: var(--dar-navy);
	color: #fff;
	margin-left: auto;
	border-bottom-right-radius: 4px;
	box-shadow: 0 2px 8px rgba(11, 28, 51, 0.15);
}

.dar-msg.bot {
	background: #fff;
	border: 1px solid var(--dar-tape-line);
	border-bottom-left-radius: 4px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.04);
	color: var(--dar-ink);
}

.dar-msg.bot strong {
	font-weight: 700;
	color: var(--dar-navy);
}

/* Formula / code blocks inside bot messages */
.dar-msg .dar-formula {
	display: block;
	font-family: "IBM Plex Mono", "SF Mono", "Consolas", monospace;
	font-size: 12.5px;
	line-height: 1.5;
	background: #fffdf7;
	border: 1px dashed #d4c9a8;
	border-radius: 10px;
	padding: 12px 14px;
	margin: 10px 0;
	white-space: pre-wrap;
	color: #3d3420;
	overflow-x: auto;
}

.dar-msg.bot p {
	margin: 0 0 8px;
}

.dar-msg.bot p:last-child {
	margin-bottom: 0;
}

.dar-msg.bot ul,
.dar-msg.bot ol {
	margin: 8px 0;
	padding-left: 1.3em;
}

.dar-msg.bot li {
	margin-bottom: 4px;
}

/* Typing indicator */
.dar-typing {
	padding: 10px 14px;
	font-size: 13px;
	color: var(--dar-ink-soft);
	font-style: italic;
}

.dar-typing span {
	animation: dar-dot 1.2s infinite;
	opacity: 0.3;
}

.dar-typing span:nth-child(2) { animation-delay: 0.2s; }
.dar-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dar-dot {
	0%, 80%, 100% { opacity: 0.3; }
	40% { opacity: 1; }
}

/* ----- Trade chips ----- */
.dar-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 12px 14px 4px;
	background: #fff;
}

.dar-chip {
	border: 1px solid var(--dar-tape-line);
	background: #faf9f6;
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
	color: var(--dar-ink);
	line-height: 1.3;
}

.dar-chip:hover {
	border-color: var(--dar-amber);
	background: #fffbeb;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
}

.dar-chip:active {
	transform: translateY(0);
}

/* ----- Tool buttons ----- */
.dar-tools {
	display: flex;
	gap: 6px;
	padding: 8px 14px 12px;
	flex-wrap: wrap;
	background: #fff;
}

.dar-tool-btn {
	border: 1px solid var(--dar-tape-line);
	background: #faf9f6;
	border-radius: 9px;
	padding: 7px 11px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
	color: var(--dar-ink-soft);
	line-height: 1.3;
}

.dar-tool-btn:hover {
	border-color: var(--dar-navy);
	color: var(--dar-navy);
	background: #f0f4f8;
}

/* ----- Tool panels ----- */
.dar-tool-panel {
	padding: 14px 16px 16px;
	border-top: 1px solid var(--dar-tape-line);
	background: #fdfcfa;
}

.dar-tool-panel[hidden] {
	display: none !important;
}

.dar-tool-panel h3 {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--dar-navy);
	letter-spacing: -0.01em;
}

.dar-tool-panel > p {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--dar-ink-soft);
	line-height: 1.45;
}

.dar-tool-panel label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin: 10px 0 4px;
	color: var(--dar-ink);
}

.dar-tool-panel input[type="text"],
.dar-tool-panel input[type="number"],
.dar-tool-panel input[type="email"],
.dar-tool-panel input[type="tel"],
.dar-tool-panel input[type="date"],
.dar-tool-panel input[type="time"],
.dar-tool-panel textarea,
.dar-tool-panel select {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--dar-tape-line);
	border-radius: 9px;
	font-size: 13.5px;
	box-sizing: border-box;
	background: #fff;
	color: var(--dar-ink);
	transition: border-color 0.15s;
	font-family: inherit;
}

.dar-tool-panel input:focus,
.dar-tool-panel textarea:focus,
.dar-tool-panel select:focus {
	outline: none;
	border-color: var(--dar-amber);
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.dar-measure-grid,
.dar-book-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 10px;
}

.dar-book-grid .span-2 {
	grid-column: 1 / -1;
}

.dar-panel-submit {
	margin-top: 14px;
	width: 100%;
	padding: 11px;
	background: linear-gradient(135deg, var(--dar-navy) 0%, var(--dar-navy-soft) 100%);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-weight: 650;
	font-size: 14px;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.1s;
	letter-spacing: -0.01em;
}

.dar-panel-submit:hover {
	opacity: 0.92;
}

.dar-panel-submit:active {
	transform: scale(0.99);
}

.dar-panel-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.dar-panel-status {
	font-size: 12.5px;
	margin: 10px 0 0;
	color: var(--dar-ink-soft);
	line-height: 1.4;
}

/* File upload */
.dar-file-label {
	display: block;
	padding: 14px;
	border: 1.5px dashed var(--dar-tape-line);
	border-radius: 10px;
	text-align: center;
	cursor: pointer;
	margin: 10px 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--dar-ink-soft);
	transition: border-color 0.15s, background 0.15s;
	background: #fff;
}

.dar-file-label:hover {
	border-color: var(--dar-amber);
	background: #fffbeb;
	color: var(--dar-navy);
}

.dar-file-label input {
	display: none;
}

.dar-photo-preview {
	margin: 10px 0;
	text-align: center;
}

.dar-photo-preview img {
	max-width: 100%;
	max-height: 160px;
	border-radius: 10px;
	border: 1px solid var(--dar-tape-line);
}

.dar-photo-preview span {
	display: block;
	font-size: 11.5px;
	color: var(--dar-ink-soft);
	margin-top: 6px;
}

.dar-calc-result {
	margin: 10px 0 0;
	padding: 10px 12px;
	background: #f0f7ff;
	border-radius: 8px;
	font-size: 13px;
	font-family: "IBM Plex Mono", monospace;
	color: var(--dar-navy);
	display: none;
}

.dar-calc-result:not(:empty) {
	display: block;
}

/* ----- Composer ----- */
.dar-composer {
	display: flex;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid var(--dar-tape-line);
	background: #fff;
	align-items: center;
}

.dar-composer input[type="text"] {
	flex: 1;
	padding: 11px 14px;
	border: 1.5px solid var(--dar-tape-line);
	border-radius: 12px;
	font-size: 14px;
	font-family: inherit;
	color: var(--dar-ink);
	background: #faf9f6;
	transition: border-color 0.15s, box-shadow 0.15s;
	min-width: 0;
}

.dar-composer input[type="text"]:focus {
	outline: none;
	border-color: var(--dar-amber);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.dar-composer input[type="text"]::placeholder {
	color: #9ca3af;
}

.dar-composer button {
	padding: 11px 18px;
	background: linear-gradient(135deg, var(--dar-amber) 0%, #f97316 100%);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	flex-shrink: 0;
	transition: opacity 0.15s, transform 0.1s;
	letter-spacing: -0.01em;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.dar-composer button:hover {
	opacity: 0.92;
}

.dar-composer button:active {
	transform: scale(0.97);
}

.dar-composer button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	box-shadow: none;
}

/* ----- Footer disclaimer ----- */
.dar-foot {
	text-align: center;
	font-size: 9.5px;
	letter-spacing: 0.06em;
	padding: 9px 12px;
	color: var(--dar-ink-soft);
	background: #f3f1ec;
	font-weight: 500;
	line-height: 1.4;
}

/* ----- Screen reader ----- */
.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;
}

/* ----- Responsive ----- */
@media (max-width: 480px) {
	.dar-ticket {
		max-width: 100%;
		border-radius: 14px;
	}
	.dar-log {
		height: 260px;
	}
	.dar-measure-grid,
	.dar-book-grid {
		grid-template-columns: 1fr;
	}
}

/* ----- Nearby pros map ----- */
.dar-map-canvas {
	height: 220px;
	width: 100%;
	border-radius: 12px;
	border: 1px solid var(--dar-tape-line);
	margin: 10px 0;
	background: #e8eef5;
	z-index: 1;
}

.dar-map-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 10px;
	flex-wrap: wrap;
}

.dar-map-results {
	max-height: 180px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 8px 0 4px;
}

.dar-map-pro {
	text-align: left;
	border: 1px solid var(--dar-tape-line);
	background: #fff;
	border-radius: 10px;
	padding: 10px 12px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.35;
	transition: border-color 0.15s, background 0.15s;
}

.dar-map-pro:hover {
	border-color: var(--dar-amber);
	background: #fffbeb;
}

.dar-map-pro strong {
	display: block;
	color: var(--dar-navy);
	font-size: 13.5px;
	margin-bottom: 2px;
}

.dar-map-meta {
	display: block;
	color: var(--dar-ink-soft);
	font-size: 12px;
}

.dar-map-empty {
	font-size: 13px;
	color: var(--dar-ink-soft);
	margin: 8px 0;
}

.dar-map-email {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--dar-tape-line);
}

.dar-map-email h3 {
	margin: 0 0 6px;
	font-size: 14px;
}
/* ============================================================
   Dar AI identity refresh — logo-matched advanced case workspace
   ============================================================ */
.dar-ticket {
	--dar-navy: #061225;
	--dar-navy-deep: #02060d;
	--dar-navy-soft: #0b2c55;
	--dar-amber: #00d9ff;
	--dar-amber-soft: #6ff5ff;
	--dar-paper: #07111f;
	--dar-ink: #d9f6ff;
	--dar-ink-soft: #8da9bf;
	--dar-tape-line: rgba(89, 210, 255, 0.22);
	--dar-radius: 22px;
	--dar-shadow: 0 24px 80px rgba(0, 15, 44, 0.42), 0 0 0 1px rgba(0, 217, 255, 0.08), 0 0 45px rgba(0, 150, 255, 0.12);
	max-width: 960px;
	background: #050b14;
	border: 1px solid rgba(73, 218, 255, 0.3);
	border-radius: var(--dar-radius);
	box-shadow: var(--dar-shadow);
	color: var(--dar-ink);
	overflow: hidden;
	position: relative;
}

.dar-ticket::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .2;
	background-image: linear-gradient(rgba(0, 214, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 214, 255, .06) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

.dar-ticket > * { position: relative; z-index: 1; }
.dar-ticket-head {
	min-height: 132px;
	gap: 18px;
	padding: 18px 24px;
	background: radial-gradient(circle at 12% 45%, rgba(0, 186, 255, .2), transparent 30%), linear-gradient(120deg, #02060d 0%, #07172d 55%, #062b52 100%);
	color: #fff;
}
.dar-brand-lockup { width: 226px; flex: 0 0 226px; }
.dar-logo { display: block; width: 100%; height: auto; max-height: 108px; object-fit: contain; object-position: left center; mix-blend-mode: screen; filter: drop-shadow(0 0 13px rgba(0, 202, 255, .38)); }
.dar-ticket-head .who { gap: 5px; }
.dar-ticket-head .who strong { color: #7ceeff; font-size: 12px; letter-spacing: .16em; }
.dar-ticket-head .who span { color: #a9bfd5; }
.dar-status { border: 1px solid rgba(105, 231, 255, .28); background: rgba(0, 17, 39, .72); color: #baf8ff; }
.dar-status .dot { background: #11e7ff; box-shadow: 0 0 0 3px rgba(17, 231, 255, .2), 0 0 14px #11e7ff; }
.dar-perf { height: 3px; background: linear-gradient(90deg, #007cff, #09eaff, #5b8cff, #007cff); background-size: 200% 100%; animation: dar-scan 3s linear infinite; }
.dar-perf span { display: block; width: 20%; height: 100%; background: #fff; box-shadow: 0 0 16px #fff, 0 0 28px #00eaff; animation: dar-perf-sweep 4s ease-in-out infinite; }
@keyframes dar-scan { to { background-position: 200% 0; } }
@keyframes dar-perf-sweep { 0%, 100% { transform: translateX(0); opacity: .3; } 50% { transform: translateX(400%); opacity: 1; } }
.dar-case-strip { display: flex; justify-content: space-between; gap: 12px; padding: 9px 24px; background: rgba(0, 14, 32, .92); border-bottom: 1px solid rgba(44, 204, 255, .14); color: #7895ad; font: 600 10px/1.2 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.dar-case-kicker { color: #45eaff; }
.dar-notice { background: rgba(123, 53, 8, .28); border-color: #9a5e19; color: #ffd9a0; }
.dar-log { height: 430px; padding: 22px 28px; background: radial-gradient(circle at 80% 10%, rgba(0, 117, 194, .16), transparent 32%), var(--dar-paper); }
.dar-log::-webkit-scrollbar-thumb { background: #166083; }
.dar-msg.user { background: linear-gradient(135deg, #075b91, #06365e); border: 1px solid rgba(70, 225, 255, .34); box-shadow: 0 8px 24px rgba(0, 134, 220, .18); }
.dar-msg.bot { background: rgba(9, 27, 45, .94); border-color: rgba(81, 215, 255, .2); color: #d8f4ff; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
.dar-msg.bot strong { color: #63eaff; }
.dar-msg .dar-formula { background: #020a14; border-color: rgba(71, 217, 255, .35); color: #b8f6ff; }
.dar-pdf-download { display: inline-block; margin-top: 14px; padding: 8px 12px; border: 1px solid rgba(95, 232, 255, .42); border-radius: 8px; background: rgba(0, 130, 184, .2); color: #8ff3ff; font: 600 11px/1.2 inherit; cursor: pointer; }
.dar-pdf-download:hover { background: rgba(0, 184, 224, .32); color: #fff; }
.dar-pdf-download:disabled { opacity: .55; cursor: wait; }
.dar-chips, .dar-tools, .dar-composer { background: #050d18; }
.dar-chips { padding: 18px 24px 7px; }
.dar-chip, .dar-tool-btn { background: rgba(8, 30, 50, .9); color: #a9d2e3; border-color: rgba(73, 205, 255, .22); }
.dar-chip:hover, .dar-tool-btn:hover { border-color: #00d9ff; background: rgba(0, 113, 170, .25); color: #d8fbff; box-shadow: 0 0 18px rgba(0, 217, 255, .14); }
.dar-tools { padding: 10px 24px 17px; }
.dar-tool-panel { background: #071422; border-color: rgba(73, 205, 255, .2); padding: 22px 28px; }
.dar-tool-panel h3 { color: #67eaff; }
.dar-tool-panel > p, .dar-panel-status { color: #8eafc2; }
.dar-tool-panel input, .dar-tool-panel textarea, .dar-tool-panel select, .dar-composer input { background: #020b15; color: #d8f5ff; border-color: rgba(73, 205, 255, .25); }
.dar-tool-panel input:focus, .dar-tool-panel textarea:focus, .dar-tool-panel select:focus, .dar-composer input:focus { border-color: #00d9ff; box-shadow: 0 0 0 3px rgba(0, 217, 255, .13), 0 0 20px rgba(0, 217, 255, .1); }
.dar-file-label { background: rgba(0, 18, 32, .7); border-color: rgba(73, 205, 255, .4); color: #9dd6e8; }
.dar-file-label:hover { border-color: #00d9ff; background: rgba(0, 105, 156, .22); color: #e0fbff; }
.dar-panel-submit { background: linear-gradient(135deg, #0077c8, #00cde8); box-shadow: 0 0 18px rgba(0, 217, 255, .22); }
.dar-composer { padding: 18px 24px; border-color: rgba(73, 205, 255, .2); }
.dar-composer input { background: #020a14; }
.dar-composer input::placeholder { color: #55758b; }
.dar-composer button { background: linear-gradient(135deg, #0088db, #09dcef); color: #02101d; box-shadow: 0 0 18px rgba(0, 217, 255, .25); }
.dar-foot { background: #020812 !important; color: #648398 !important; border-top: 1px solid rgba(73, 205, 255, .12); }
.dar-calc-result { background: rgba(0, 88, 128, .22); color: #a8f2ff; }
.dar-map-canvas { background: #082031; border-color: rgba(73, 205, 255, .25); }
.dar-map-pro { background: #081a2b; border-color: rgba(73, 205, 255, .2); color: #c5eaf5; }
.dar-map-pro:hover { border-color: #00d9ff; background: #0b2b43; }
.dar-map-pro strong { color: #67eaff; }
.dar-map-meta { color: #89afc1; }
@media (min-width: 760px) { .dar-ticket .dar-log { min-height: 430px; } .dar-ticket .dar-tool-panel { padding-left: 42px; padding-right: 42px; } }
@media (max-width: 600px) { .dar-ticket-head { min-height: 108px; padding: 14px; gap: 10px; } .dar-brand-lockup { width: 142px; flex-basis: 142px; } .dar-logo { max-height: 82px; } .dar-case-strip { padding: 8px 14px; flex-direction: column; gap: 4px; } .dar-log { height: 330px; padding: 16px; } .dar-chips, .dar-tools, .dar-composer { padding-left: 14px; padding-right: 14px; } }

/* ============================================================
   FIX: Input text visibility - darker color so you can see typing
   Add this at the VERY END of dar-estimator_css.css to override
   ============================================================ */

/* 1. The actual typed text - this was #d8f5ff (too light) */
.dar-tool-panel input,
.dar-tool-panel textarea,
.dar-tool-panel select,
.dar-composer input {
  color: #0b1c33 !important;
  -webkit-text-fill-color: #0b1c33 !important;
  caret-color: #0b1c33 !important;
}

/* 2. Make the composer field light so dark text pops */
.dar-composer input {
  background: #ffffff !important;
  border-color: rgba(11, 28, 51, 0.18) !important;
}

/* 3. Keep tool panel inputs consistent if you use them */
.dar-tool-panel input,
.dar-tool-panel textarea,
.dar-tool-panel select {
  background: #ffffff !important;
}

/* 4. Placeholder stays muted but visible */
.dar-composer input::placeholder,
.dar-tool-panel input::placeholder,
.dar-tool-panel textarea::placeholder {
  color: #5a6a7e !important;
  -webkit-text-fill-color: #5a6a7e !important;
}

/* 5. Focus state */
.dar-composer input:focus,
.dar-tool-panel input:focus,
.dar-tool-panel textarea:focus,
.dar-tool-panel select:focus {
  border-color: #0b1c33 !important;
  box-shadow: 0 0 0 3px rgba(11, 28, 51, 0.12) !important;
}

/* ALTERNATIVE - if you want to KEEP dark background but make text pure white:
Uncomment this block and comment out the blocks above

.dar-composer input {
  background: #020a14 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #00d9ff !important;
}
*/


/* ----- Field Hub (single-form on-site workflow) ----- */
.dar-field-hub{max-width:960px;margin:0 auto;padding:32px 20px;color:#0b1c33;font-family:'DM Sans',sans-serif}
.dar-fh-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.dar-fh-header h2{margin:0;font-family:'Fraunces',serif;font-size:26px}
.dar-fh-status{font-size:13px;color:#5b6b82}
.dar-fh-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){.dar-fh-grid{grid-template-columns:1fr}}
.dar-fh-card{background:#fff;border:1px solid #e4e9f2;border-radius:14px;padding:18px}
.dar-fh-card h3{margin:0 0 12px;font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:#5b6b82}
.dar-fh-card label{display:block;font-size:13px;color:#5b6b82;margin-bottom:12px}
.dar-fh-card input,.dar-fh-card select,.dar-fh-card textarea{width:100%;margin-top:4px;padding:9px 10px;border:1px solid #d7dee8;border-radius:8px;font-size:14px;font-family:inherit;color:#0b1c33;box-sizing:border-box}
.dar-fh-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dar-fh-hint{font-size:12px;color:#8291a6;margin:0 0 10px}
.dar-fh-media-grid{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.dar-fh-media-item{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;background:#eef1f6}
.dar-fh-media-item img{width:100%;height:100%;object-fit:cover;display:block}
.dar-fh-media-video-badge{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#5b6b82;text-align:center}
.dar-fh-media-remove{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;border:none;background:rgba(11,28,51,.75);color:#fff;font-size:12px;line-height:1;cursor:pointer}
.dar-fh-status{font-size:12px;color:#8291a6;min-height:16px}
.dar-fh-ai-note{margin-top:10px;padding:10px 12px;background:#f4f7fb;border-radius:8px;font-size:13px;white-space:pre-wrap}
.dar-fh-total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid #e4e9f2;font-size:15px}
.dar-fh-total strong{font-size:22px}
.dar-fh-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}