body[data-path="accounting-dashboard"] {
		background: #F7F8FB;
	}
	.acd-page {
		max-width: 1120px;
		margin: 0 auto;
		padding: 24px 20px 60px;
		font-family: inherit;
	}

	/* Sitewide field styling -- most form fields across the app (payment
	   entry, account/party creation, journal entry builder) rendered with
	   zero custom CSS before this, just bare browser defaults, clashing
	   badly with the card/glass-modal look everywhere else. More specific
	   selectors (e.g. .acd-po-field input) still win over this by normal
	   CSS specificity, so this only fills the gap, doesn't override them. */
	.acd-page input[type="text"], .acd-page input[type="number"],
	.acd-page input[type="password"], .acd-page input[type="date"],
	.acd-page input[type="email"], .acd-page input[type="tel"],
	.acd-page select, .acd-page textarea {
		font-family: inherit;
		font-size: 0.9rem;
		padding: 8px 12px;
		border: 1px solid #D6DCE7;
		border-radius: 8px;
		background: #fff;
		color: #0F1B2E;
		box-sizing: border-box;
		transition: border-color 0.15s, box-shadow 0.15s;
	}
	.acd-page input[type="text"]:focus, .acd-page input[type="number"]:focus,
	.acd-page input[type="password"]:focus, .acd-page input[type="date"]:focus,
	.acd-page input[type="email"]:focus, .acd-page input[type="tel"]:focus,
	.acd-page select:focus, .acd-page textarea:focus {
		outline: none;
		border-color: #C9A24B;
		box-shadow: 0 0 0 3px rgba(201,162,74,0.18);
	}
	.acd-page input::placeholder, .acd-page textarea::placeholder { color: #b7bfcd; }
	.acd-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 18px;
	}
	.acd-header h1 {
		font-size: 1.5rem;
		font-weight: 800;
		color: #0F1B2E;
		margin: 0;
	}
	.acd-header .acd-updated {
		color: #7a8aa0;
		font-size: 0.82rem;
	}

	/* #acdTabs only ever wraps this one hero div, so its box is exactly as
	   tall as the hero -- position:sticky is confined to its immediate
	   parent's box, so with no extra height there it had nowhere to stick
	   and scrolled away instantly. display:contents removes #acdTabs from
	   layout so the hero's containing block becomes #acdApp instead, which
	   spans the whole page -- giving sticky real room to work. */
	#acdTabs { display: contents; }

	/* Large, unmistakable "you are here" header for the company you're
	   already inside -- switching companies now happens only through the
	   "تبديل الشركة" link back to the full picker gate, so this replaces
	   the old clickable tab list entirely. Deliberately bigger and more
	   ornate than a .acd-card so it never reads as just another card. */
	.acd-company-hero {
		display: flex;
		align-items: center;
		gap: 20px;
		background: linear-gradient(135deg, var(--acd-accent-glow, rgba(201,162,74,0.16)) 0%, #ffffff 60%);
		background-color: #fff;
		border: 1px solid var(--acd-accent, #C9A24B);
		border-radius: 22px;
		padding: 22px 28px;
		margin-bottom: 26px;
		box-shadow: 0 16px 36px -18px var(--acd-accent-glow, rgba(201,162,74,0.5));
		position: sticky;
		top: 12px;
		z-index: 60;
	}
	.acd-company-hero-logo-wrap {
		width: 72px;
		height: 72px;
		border-radius: 18px;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6px 16px rgba(15,27,46,0.14);
		border: 2px solid var(--acd-accent, #C9A24B);
		flex-shrink: 0;
		font-size: 30px;
	}
	.acd-company-hero-logo { width: 48px; height: 48px; object-fit: contain; }
	.acd-company-hero-text { display: flex; flex-direction: column; gap: 3px; }
	.acd-company-hero-eyebrow {
		font-size: 0.74rem;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--acd-accent, #C9A24B);
	}
	.acd-company-hero-name {
		font-size: 1.7rem;
		font-weight: 900;
		color: #0F1B2E;
		line-height: 1.2;
	}
	.acd-company-hero-all {
		background: linear-gradient(135deg, rgba(15,27,46,0.06) 0%, #ffffff 60%);
		border-color: #C7CEDB;
		box-shadow: 0 16px 36px -18px rgba(15,27,46,0.18);
	}
	.acd-company-hero-all .acd-company-hero-eyebrow,
	.acd-company-hero-all .acd-company-hero-logo-wrap { color: #7a8aa0; border-color: #C7CEDB; }

	@media (max-width: 600px) {
		.acd-company-hero { padding: 16px 18px; gap: 14px; }
		.acd-company-hero-logo-wrap { width: 54px; height: 54px; border-radius: 14px; }
		.acd-company-hero-logo { width: 36px; height: 36px; }
		.acd-company-hero-name { font-size: 1.25rem; }
	}

	.acd-kpi-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
		gap: 14px;
		margin-bottom: 26px;
	}
	.acd-kpi-card {
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 2px 14px rgba(15,27,46,0.08);
		padding: 18px;
		border-top: 3px solid #C9A24B;
	}
	.acd-kpi-label {
		color: #7a8aa0;
		font-size: 0.78rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		margin-bottom: 8px;
	}
	.acd-kpi-value {
		color: #0F1B2E;
		font-size: 1.55rem;
		font-weight: 800;
		line-height: 1.2;
		margin-bottom: 6px;
	}
	.acd-kpi-value.acd-empty { color: #b7bfcd; font-size: 1rem; font-weight: 600; }
	.acd-kpi-verify {
		display: inline-block;
		color: #8a6d1f;
		font-size: 0.74rem;
		text-decoration: none;
		border-bottom: 1px dashed #C9A24B;
	}

	.acd-card {
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 2px 14px rgba(15,27,46,0.08);
		padding: 22px;
		margin-bottom: 24px;
	}
	.acd-card h2 {
		font-size: 1.05rem;
		font-weight: 800;
		color: #0F1B2E;
		margin: 0 0 16px;
	}

	.acd-charts-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 18px;
		margin-bottom: 24px;
	}
	.acd-chart-card svg { width: 100%; height: auto; display: block; }
	.acd-chart-empty {
		color: #b7bfcd;
		font-size: 0.9rem;
		text-align: center;
		padding: 40px 10px;
	}

	.acd-reports-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 12px;
	}
	.acd-report-btn {
		background: #fff;
		border: 1px solid #E2E6EF;
		border-radius: 12px;
		padding: 14px 16px;
		text-align: right;
		cursor: pointer;
		text-decoration: none;
		display: block;
		color: #0F1B2E;
		font-weight: 700;
		font-size: 0.9rem;
		transition: border-color 0.15s, transform 0.15s;
	}
	.acd-report-btn:hover { border-color: #C9A24B; transform: translateY(-2px); text-decoration: none; }
	.acd-report-btn .acd-report-desc {
		display: block;
		color: #7a8aa0;
		font-size: 0.76rem;
		font-weight: 500;
		margin-top: 4px;
	}

	/* ---- Material Request item table: one header row instead of a label
	   repeated on every line, plus a ✕ per row to drop it outright. Scrolls
	   horizontally on narrow screens instead of squeezing columns. ---- */
	.acd-item-table-wrap { overflow-x: auto; border: 1px solid #E2E6EF; border-radius: 12px; }
	.acd-item-table { width: 100%; border-collapse: collapse; min-width: 480px; }
	.acd-item-table th {
		text-align: right;
		padding: 8px 10px;
		font-size: 0.76rem;
		font-weight: 800;
		color: #7a8aa0;
		background: #FAFBFD;
		border-bottom: 1px solid #E2E6EF;
	}
	.acd-item-table td {
		padding: 6px 8px;
		border-bottom: 1px solid #EEF1F6;
	}
	.acd-item-table tbody tr:last-child td { border-bottom: none; }
	.acd-item-table input, .acd-item-table textarea {
		width: 100%;
		font-size: 0.92rem;
		padding: 6px 8px;
		border: 1px solid #D6DCE7;
		border-radius: 8px;
		background: #fff;
		font-family: inherit;
	}
	/* Real supplier PI text (extracted from a file, not hand-typed) runs long
	   -- an <input> hides everything past its own width with no way to see
	   it, so البيان/description is a real <textarea> that wraps instead of
	   truncating; item code stays a single-line <input>, it's short by nature. */
	.acd-item-table textarea {
		resize: vertical;
		min-height: 44px;
		line-height: 1.4;
		white-space: pre-wrap;
	}
	.acd-item-table td:nth-child(1) { min-width: 150px; }
	.acd-item-table td:nth-child(2) { min-width: 260px; }
	.acd-item-table td:nth-child(3) { width: 90px; }
	.acd-item-table td:nth-child(4) { width: 90px; }
	.acd-item-table td.acd-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; padding-inline: 12px; }
	/* A row whose extracted item text didn't match anything in the catalog --
	   the status note tells the owner to look for this, so it has to
	   actually exist. */
	.acd-item-table tr.acd-row-needs-review { background: #FFF6DA; }
	.acd-item-table tr.acd-row-needs-review td { background: #FFF6DA; }
	/* Only worth showing once a row is actually flagged -- for an already-
	   matched row there's nothing to create. */
	.acd-po-create-item {
		display: none;
		margin-top: 4px;
		font-size: 0.74rem;
		color: #8a6d1f;
		cursor: pointer;
		text-decoration: none;
	}
	.acd-po-create-item:hover { text-decoration: underline; }
	.acd-row-needs-review .acd-po-create-item { display: inline-block; }
	.acd-item-table-total {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
		padding: 10px 14px;
		margin-top: -1px;
		background: #FAFBFD;
		border: 1px solid #E2E6EF;
		border-top: none;
		border-radius: 0 0 12px 12px;
		font-weight: 800;
		color: #0F1B2E;
	}
	.acd-row-remove-cell { width: 30px; text-align: center; }
	.acd-row-remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		color: #B23B3B;
		cursor: pointer;
		font-weight: 700;
		text-decoration: none;
	}
	.acd-row-remove:hover { background: rgba(178,59,59,0.12); }

	/* ---- Balance Sheet / P&L collapsible tree -- real hierarchy with
	   expand/collapse arrows, not a flat dumped table. ---- */
	.acd-fs-tree { border: 1px solid #E2E6EF; border-radius: 12px; overflow: hidden; }
	.acd-fs-row {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 9px 14px;
		border-bottom: 1px solid #EEF1F6;
		background: #fff;
		font-size: 0.88rem;
	}
	.acd-fs-row:last-child { border-bottom: none; }
	.acd-fs-row:hover { background: #FAFBFD; }
	.acd-fs-arrow {
		flex: 0 0 auto;
		width: 18px;
		text-align: center;
		cursor: pointer;
		color: #7a8aa0;
		font-size: 0.75rem;
		user-select: none;
	}
	.acd-fs-arrow-spacer { flex: 0 0 auto; width: 18px; }
	.acd-fs-label { flex: 1 1 auto; color: #0F1B2E; }
	.acd-fs-row .acd-num { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: #0F1B2E; }
	.acd-fs-group { font-weight: 700; background: #FAFBFD; }
	.acd-fs-group:hover { background: #F3F5F9; }
	.acd-fs-root { font-weight: 800; background: #EEF1F6; }
	.acd-fs-root .acd-fs-label { color: #0F1B2E; font-size: 0.95rem; }
	.acd-fs-total {
		display: flex;
		justify-content: space-between;
		padding: 12px 14px;
		font-weight: 800;
		background: #0F1B2E;
		color: #F0D9A0;
		border-top: 2px solid var(--acd-accent, #C9A24B);
	}
	.acd-fs-action {
		flex: 0 0 auto;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 0.72rem;
		color: #7a8aa0;
		cursor: pointer;
		margin-inline-start: 4px;
	}
	.acd-fs-action:hover { background: rgba(15,27,46,0.08); color: #0F1B2E; }
	.acd-fs-inline-form {
		align-items: center;
		gap: 6px;
		padding: 8px 14px;
		background: #FAFBFD;
		border-bottom: 1px solid #EEF1F6;
	}

	.acd-report-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.88rem;
		border: 1px solid #C7CEDB;
	}
	.acd-report-table th, .acd-report-table td {
		text-align: right;
		padding: 8px 12px;
		border: 1px solid #C7CEDB;
	}
	.acd-report-table th {
		color: #0F1B2E;
		font-size: 0.78rem;
		font-weight: 800;
		background: #EEF1F6;
	}
	.acd-report-table tbody tr:nth-child(even) { background: #FAFBFD; }
	.acd-report-table td.acd-num { text-align: right; font-variant-numeric: tabular-nums; }
	.acd-report-panel { margin-top: 16px; overflow-x: auto; }
	.acd-inline-link {
		display: inline-block;
		color: #8a6d1f;
		font-weight: 700;
		font-size: 0.85rem;
		text-decoration: none;
		cursor: pointer;
	}
	.acd-inline-link:hover { text-decoration: underline; }

	/* Custom search dropdown -- replaces native <datalist>, whose popup was
	   confirmed live to silently not render even with correct option data.
	   Positioned fixed + appended to <body> (not the input's own parent) so
	   it escapes the glass modal's own overflow:auto clipping. */
	.acd-ac-list {
		position: fixed;
		background: #fff;
		border: 1px solid #D6DCE7;
		border-radius: 10px;
		box-shadow: 0 16px 34px -14px rgba(15,27,46,0.35);
		max-height: 240px;
		overflow-y: auto;
		z-index: 5000;
	}
	.acd-ac-item {
		padding: 9px 12px;
		font-size: 0.88rem;
		text-align: right;
		cursor: pointer;
		border-bottom: 1px solid #F2F4F8;
	}
	.acd-ac-item:last-child { border-bottom: none; }
	.acd-ac-item:hover { background: #FAF6EC; color: #8a6d1f; }
	.acd-ac-empty { padding: 10px 12px; font-size: 0.82rem; color: #b7bfcd; text-align: right; }

	/* Payment Entry form structure -- required fields grouped into clear
	   rows by role (who/how much, then when/reference), optional/advanced
	   fields (account override, remark, declared-USD) set apart in their
	   own subdued box so they read as secondary, not equal-weight clutter
	   next to the fields every transaction actually needs. */
	.acd-pe-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; align-items: end; }
	.acd-pe-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; }
	.acd-pe-field-wide { flex: 2 1 260px; }
	.acd-pe-field-narrow { flex: 0 1 130px; }
	.acd-pe-field label { font-size: 0.8rem; font-weight: 700; color: #7a8aa0; }
	.acd-pe-advanced {
		margin: 4px 0 18px;
		padding: 14px 16px 2px;
		background: #FAFBFD;
		border: 1px dashed #D6DCE7;
		border-radius: 12px;
	}
	.acd-pe-advanced-title {
		font-size: 0.76rem;
		font-weight: 800;
		color: #8a6d1f;
		letter-spacing: 0.02em;
		margin-bottom: 12px;
	}

	.acd-btn {
		background: #0F1B2E;
		color: #F0D9A0;
		border: none;
		border-radius: 10px;
		padding: 10px 18px;
		font-weight: 700;
		font-size: 0.88rem;
		cursor: pointer;
	}
	.acd-btn.secondary { background: #fff; color: #0F1B2E; border: 1px solid #E2E6EF; }

	.acd-status { font-size: 0.85rem; margin-top: 10px; }
	.acd-status.ok { color: #1a7f37; }
	.acd-status.err { color: #c0392b; }

	.acd-locked {
		max-width: 420px;
		margin: 80px auto;
		text-align: center;
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 2px 14px rgba(15,27,46,0.08);
		padding: 32px 24px;
	}
	.acd-locked a { color: #8a6d1f; font-weight: 700; text-decoration: none; }

	.acd-banner {
		background: #FFF7E6;
		border: 1px solid #F0D9A0;
		border-inline-start: 5px solid #C9A24B;
		border-radius: 12px;
		padding: 14px 18px;
		margin-bottom: 20px;
		font-size: 0.9rem;
		color: #7a5c1e;
		line-height: 1.7;
	}

	.acd-gate {
		max-width: 780px;
		margin: 48px auto;
		text-align: center;
		padding: 20px;
	}
	.acd-gate h2 {
		color: #0F1B2E;
		font-size: 1.3rem;
		font-weight: 800;
		margin: 0 0 6px;
	}
	.acd-gate p {
		color: #7a8aa0;
		font-size: 0.88rem;
		margin: 0 0 26px;
	}
	.acd-gate-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
		gap: 22px;
	}
	.acd-gate-card {
		background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
		border: none;
		border-top: 5px solid var(--acd-gate-accent, #C9A24B);
		border-radius: 20px;
		padding: 30px 18px 26px;
		cursor: pointer;
		box-shadow: 0 6px 20px rgba(15,27,46,0.10);
		transition: transform 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.28s ease;
		opacity: 0;
		transform: translateY(16px);
		animation: acdGateIn 0.55s cubic-bezier(.2,.8,.2,1) forwards;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}
	.acd-gate-card:hover, .acd-gate-card:focus-visible {
		transform: translateY(-10px) scale(1.035);
		box-shadow: 0 22px 40px -12px var(--acd-gate-glow, rgba(201,162,74,0.5));
		outline: none;
	}
	.acd-gate-logo {
		width: 68px;
		height: 68px;
		object-fit: contain;
		margin-bottom: 12px;
		transition: transform 0.28s ease;
	}
	.acd-gate-card:hover .acd-gate-logo { transform: scale(1.08) rotate(-2deg); }
	.acd-gate-name {
		font-weight: 800;
		color: #0F1B2E;
		font-size: 0.98rem;
		line-height: 1.4;
	}
	.acd-gate-hint {
		font-size: 0.72rem;
		color: #b7bfcd;
		margin-top: 6px;
		opacity: 0;
		transition: opacity 0.2s ease;
	}
	.acd-gate-card:hover .acd-gate-hint { opacity: 1; color: var(--acd-gate-accent, #C9A24B); }
	.acd-gate-all {
		display: inline-block;
		margin-top: 30px;
		color: #7a8aa0;
		font-size: 0.82rem;
		text-decoration: none;
		border-bottom: 1px dashed #C7CEDB;
		cursor: pointer;
	}
	.acd-gate-all:hover { color: #0F1B2E; border-color: #0F1B2E; }

	@keyframes acdGateIn {
		to { opacity: 1; transform: translateY(0); }
	}

	@media (max-width: 768px) {
		.acd-charts-grid { grid-template-columns: 1fr; }
		.acd-page { padding: 18px 14px 50px; }
		.acd-kpi-value { font-size: 1.3rem; }
	}

	/* ---- Per-company accent theming: #acdApp gets --acd-accent/--acd-accent-glow
	   set by JS (acdApplyAccent) to the SAME color used for that company's card
	   on the picker screen, so the whole session stays visually tied to whichever
	   company you're working in. Falls back to the original gold when unset
	   (e.g. "All Companies" view). ---- */
	.acd-kpi-card {
		border-top: 3px solid var(--acd-accent, #C9A24B);
		transition: box-shadow 0.2s ease, transform 0.2s ease;
	}
	.acd-kpi-card[style*="cursor:pointer"]:hover {
		box-shadow: 0 14px 30px -10px var(--acd-accent-glow, rgba(201,162,74,0.4));
		transform: translateY(-3px);
	}
	.acd-report-btn:hover {
		border-color: var(--acd-accent, #C9A24B);
		box-shadow: 0 14px 30px -12px var(--acd-accent-glow, rgba(201,162,74,0.35));
	}
	.acd-kpi-verify { border-bottom-color: var(--acd-accent, #C9A24B); }
	.acd-company-tab.active { border: 1px solid var(--acd-accent, #0F1B2E); }

	/* ---- Glass modal shell for report/voucher/create panels ---- */
	.acd-modal-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(15,27,46,0.45);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		z-index: 999;
		display: none;
		align-items: flex-start;
		justify-content: center;
		overflow-y: auto;
		padding: 48px 16px;
	}
	.acd-modal-glass {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1000;
		width: min(920px, calc(100vw - 32px));
		height: auto;
		max-height: 98vh;
		min-width: 360px;
		min-height: 220px;
		max-width: 98vw;
		overflow: auto;
		background: rgba(255,255,255,0.78);
		backdrop-filter: blur(22px) saturate(180%);
		-webkit-backdrop-filter: blur(22px) saturate(180%);
		border: 1px solid rgba(255,255,255,0.6);
		border-top: 4px solid var(--acd-accent, #C9A24B);
		border-radius: 22px;
		box-shadow: 0 30px 70px -16px rgba(15,27,46,0.4);
		padding: 24px 26px 30px;
		animation: acdModalIn 0.28s cubic-bezier(.2,.8,.2,1);
	}
	/* Sticky (not just the first block) so move/maximize/close stay reachable
	   even after scrolling down inside a tall panel -- the owner correctly
	   pointed out that with the old plain-flow bar, scrolling lost access to
	   all three. Both controls sit together on the physical left (float:left
	   territory, same corner the old standalone ✕ used to occupy alone). */
	.acd-drag-handle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: sticky;
		top: -24px;
		z-index: 20;
		margin: -24px -26px 10px;
		padding: 8px 0;
		font-size: 0.8rem;
		letter-spacing: 3px;
		color: #B7C0D1;
		cursor: move;
		user-select: none;
		background: rgba(255,255,255,0.92);
		border-bottom: 1px solid rgba(15,27,46,0.06);
		border-radius: 22px 22px 0 0;
	}
	.acd-drag-handle:hover { color: #7a8aa0; }
	.acd-modal-controls {
		position: absolute;
		left: 14px;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.acd-modal-max-btn, .acd-modal-close-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		cursor: pointer;
		color: #7a8aa0;
		font-size: 0.85rem;
		text-decoration: none;
		line-height: 1;
		background: rgba(15,27,46,0.06);
	}
	.acd-modal-max-btn:hover, .acd-modal-close-btn:hover { background: rgba(15,27,46,0.14); color: #0F1B2E; }
	/* 8 resize handles (4 edges + 4 corners), each a thin strip along its
	   edge with the matching resize cursor -- replaces the native CSS
	   `resize: both`, which only ever gave one corner and left the owner
	   unable to grow the window from any other side. */
	.acd-resize-handle { position: absolute; z-index: 5; }
	.acd-resize-n, .acd-resize-s { left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
	.acd-resize-n { top: -4px; }
	.acd-resize-s { bottom: -4px; }
	.acd-resize-e, .acd-resize-w { top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
	.acd-resize-e { inset-inline-end: -4px; }
	.acd-resize-w { inset-inline-start: -4px; }
	.acd-resize-ne, .acd-resize-nw, .acd-resize-se, .acd-resize-sw { width: 16px; height: 16px; }
	.acd-resize-ne { top: -4px; inset-inline-end: -4px; cursor: nesw-resize; }
	.acd-resize-nw { top: -4px; inset-inline-start: -4px; cursor: nwse-resize; }
	.acd-resize-se { bottom: -4px; inset-inline-end: -4px; cursor: nwse-resize; }
	.acd-resize-sw { bottom: -4px; inset-inline-start: -4px; cursor: nesw-resize; }
	@keyframes acdModalIn {
		from { opacity: 0; transform: translate(-50%, -46%); }
		to { opacity: 1; transform: translate(-50%, -50%); }
	}

	@media (max-width: 768px) {
		.acd-modal-backdrop { padding: 0; }
		.acd-modal-glass {
			top: 0; left: 0; transform: none;
			width: 100%;
			height: 100%;
			max-height: 100%;
			border-radius: 0;
			padding: 18px 16px 30px;
		}
		/* Drag/resize genuinely don't apply on a fullscreen mobile sheet (and
		   acdStartModalDrag/acdStartModalResize already no-op under 768px
		   regardless), but the bar itself has to stay -- it's the only place
		   ✕ lives now that the old always-visible standalone close button is
		   gone, replaced by this shared one. */
		.acd-resize-handle { display: none; }
		.acd-drag-handle { cursor: default; }
		.acd-drag-grip, .acd-modal-max-btn { display: none; }
		@keyframes acdModalIn {
			from { opacity: 0; transform: translateY(12px); }
			to { opacity: 1; transform: translateY(0); }
		}
	}