html[data-theme="dark"] {
	--dm-bg-page: #12151a;
	--dm-bg-surface: #1b1f27;
	--dm-bg-surface-alt: #20242c;
	--dm-bg-navbar: #181c24;
	--dm-bg-dropdown: #1e222a;
	--dm-bg-footer: #14171d;
	--dm-border: #2c313b;
	--dm-border-strong: #3a4150;
	--dm-text-primary: #e8e8e8;
	--dm-text-secondary: #b8bcc4;
	--dm-text-muted: #8a8f99;
	--dm-link: #4fa8ff;
	--dm-link-hover: #79c0ff;
	--dm-hover-bg: #232936;
	--dm-input-bg: #1c2027;
	--dm-input-border: #3a4150;
	--dm-input-text: #e8e8e8;
}

/* ----------------------------------------------------------------
   1. General structures
   ---------------------------------------------------------------- */
html[data-theme="dark"] body {
	background: var(--dm-bg-page);
	color: var(--dm-text-secondary);
}
html[data-theme="dark"] p {
	color: var(--dm-text-secondary);
}
/* Native checkbox/radio controls stay a bright OS-drawn white box
   regardless of accent-color, so they're redrawn entirely. */
html[data-theme="dark"] input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	margin: 0;
	border: 1px solid var(--dm-border-strong);
	border-radius: 3px;
	background-color: var(--dm-input-bg);
	cursor: pointer;
	position: relative;
	vertical-align: middle;
}
html[data-theme="dark"] input[type="checkbox"]:checked {
	background-color: var(--dm-link);
	border-color: var(--dm-link);
}
html[data-theme="dark"] input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
html[data-theme="dark"] input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	margin: 0;
	border: 1px solid var(--dm-border-strong);
	border-radius: 50%;
	background-color: var(--dm-input-bg);
	cursor: pointer;
	position: relative;
	vertical-align: middle;
}
html[data-theme="dark"] input[type="radio"]:checked {
	border-color: var(--dm-link);
}
html[data-theme="dark"] input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--dm-link);
}
/* <select> elements (many, like the per-page picker, carry no .form-control class) */
html[data-theme="dark"] select {
	background-color: var(--dm-input-bg);
	border: 1px solid var(--dm-input-border);
	color: var(--dm-input-text);
}
html[data-theme="dark"] select option {
	background-color: var(--dm-input-bg);
	color: var(--dm-input-text);
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
	color: var(--dm-text-primary) !important;
}
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus {
	color: var(--dm-link-hover);
}
html[data-theme="dark"] ::selection,
html[data-theme="dark"] ::-moz-selection {
	background: #3a4150;
	color: #fff;
}
html[data-theme="dark"] .title-header:before {
	border-top-color: var(--dm-border-strong);
}
html[data-theme="dark"] .title-header h4 {
	background: var(--dm-bg-surface-alt);
	border-color: var(--dm-border-strong);
	color: var(--dm-text-primary) !important;
}

/* ----------------------------------------------------------------
   2. Navbar / dropdown / footer / buttons
   ---------------------------------------------------------------- */
html[data-theme="dark"] .navbar-default {
	background-color: var(--dm-bg-navbar);
}
/* The hover/focus highlight is a dark tint meant for the light navbar;
   use a light tint instead so it's visible against the dark navbar. */
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus {
	background-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .navbar-header .navbar-brand,
html[data-theme="dark"] .navbar-default .navbar-nav > li > a {
	color: var(--dm-text-secondary);
}
html[data-theme="dark"] .navbar-default .navbar-nav > li > a:hover {
	color: var(--dm-text-primary);
	background: var(--dm-hover-bg);
}
html[data-theme="dark"] .navbar-default .navbar-nav > .active > a,
html[data-theme="dark"] .navbar-default .navbar-nav > .active > a:hover,
html[data-theme="dark"] .navbar-default .navbar-nav > .active > a:focus {
	color: var(--dm-text-primary);
}
html[data-theme="dark"] .dropdown-menu {
	background: var(--dm-bg-dropdown);
	border-color: var(--dm-border);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .dropdown-menu > li > a {
	color: var(--dm-text-secondary);
}
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus {
	color: var(--dm-text-primary);
	background-color: var(--dm-hover-bg);
}
html[data-theme="dark"] .dropdown-menu .divider {
	background-color: var(--dm-border);
}
html[data-theme="dark"] .login-register li > a:hover {
	background: var(--dm-hover-bg);
}
html[data-theme="dark"] .btn-theme {
	background-color: var(--dm-bg-surface-alt);
	border-color: var(--dm-bg-surface-alt);
}
html[data-theme="dark"] .btn-theme:hover,
html[data-theme="dark"] .btn-theme:focus,
html[data-theme="dark"] .btn-theme:active,
html[data-theme="dark"] .btn-theme.active {
	background-color: var(--dm-hover-bg);
	border-color: var(--dm-hover-bg);
}

/* ----------------------------------------------------------------
   3. Site wraps (header / services / portfolio / testimonials / clients / footer)
   ---------------------------------------------------------------- */
html[data-theme="dark"] #headerwrap {
	background-color: var(--dm-bg-page);
}
html[data-theme="dark"] #service i {
	color: var(--dm-text-primary);
}
html[data-theme="dark"] #cwrap {
	background: var(--dm-bg-surface);
}
html[data-theme="dark"] #footerwrap {
	background: var(--dm-bg-footer);
	color: var(--dm-text-secondary);
}
html[data-theme="dark"] #footerwrap p,
html[data-theme="dark"] #footerwrap h4 {
	color: var(--dm-text-secondary);
}
html[data-theme="dark"] #footerwrap i {
	color: #545c68;
}
html[data-theme="dark"] #footerwrap i:hover {
	color: var(--dm-text-primary);
}
html[data-theme="dark"] .ulf li a {
	color: var(--dm-text-secondary);
}
html[data-theme="dark"] .ulf li a:hover {
	color: var(--dm-link-hover);
}
html[data-theme="dark"] .footerl {
	color: var(--dm-text-muted);
}
html[data-theme="dark"] .hline,
html[data-theme="dark"] .hline-w {
	border-bottom-color: var(--dm-border);
}

/* ----------------------------------------------------------------
   4. Page configurations
   ---------------------------------------------------------------- */
html[data-theme="dark"] #blue {
	background: var(--dm-bg-surface-alt);
}
html[data-theme="dark"] #blue h3 {
	color: var(--dm-text-primary);
}
html[data-theme="dark"] .ctitle {
	color: var(--dm-text-primary);
}
html[data-theme="dark"] .badge-theme {
	background: var(--dm-bg-surface-alt);
}
html[data-theme="dark"] .popular-posts li a,
html[data-theme="dark"] .popular-posts li a:hover {
	color: var(--dm-text-primary);
}
html[data-theme="dark"] .popular-posts li em {
	color: var(--dm-text-muted);
}
html[data-theme="dark"] .btn.btn-browser {
	background-color: var(--dm-input-bg);
	border-color: var(--dm-border-strong);
	color: var(--dm-text-secondary);
}
html[data-theme="dark"] .fa-cloud-upload {
	color: var(--dm-link);
}
html[data-theme="dark"] .fa-cloud-upload:hover {
	color: var(--dm-link-hover);
}
html[data-theme="dark"] .btn.btn-default {
	background-color: var(--dm-bg-surface-alt);
	border-color: var(--dm-bg-surface-alt);
	color: var(--dm-text-secondary);
}
html[data-theme="dark"] .btn.btn-default:hover {
	background-color: var(--dm-hover-bg);
	border-color: var(--dm-hover-bg);
}
html[data-theme="dark"] #uploadform a:hover {
	color: var(--dm-link-hover);
}
html[data-theme="dark"] .upload-area {
	color: var(--dm-text-primary);
	background: var(--dm-bg-surface);
	border-color: var(--dm-border);
}
html[data-theme="dark"] .adv {
	color: var(--dm-text-primary);
	background: #24405e;
}
html[data-theme="dark"] .border {
	border-color: var(--dm-border);
}
html[data-theme="dark"] #overlay {
	background-color: rgba(0, 0, 0, 0.88);
}
html[data-theme="dark"] section .section-title {
	color: var(--dm-link);
}
html[data-theme="dark"] #what-we-do {
	background: var(--dm-bg-page);
}
html[data-theme="dark"] #what-we-do .card .card-block a {
	color: var(--dm-link) !important;
}
html[data-theme="dark"] #what-we-do .card .card-block:before {
	color: var(--dm-link);
}
html[data-theme="dark"] #sorting a {
	color: var(--dm-text-secondary);
}
html[data-theme="dark"] #sorting a:hover {
	color: var(--dm-link-hover);
}
html[data-theme="dark"] #countdown {
	color: #12151a;
	background-color: #e8e8e8;
}

/* ----------------------------------------------------------------
   5. Bootstrap component groups (site-wide, used across many views)
   ---------------------------------------------------------------- */

/* Alerts (darkened further per feedback) */
html[data-theme="dark"] .alert-success { color: #7ab286; background-color: #15291a; border-color: #234529; }
html[data-theme="dark"] .alert-success .alert-link { color: #9dd4a8; }
html[data-theme="dark"] .alert-info { color: #79aecc; background-color: #102432; border-color: #1b3c50; }
html[data-theme="dark"] .alert-info .alert-link { color: #a5d3ef; }
html[data-theme="dark"] .alert-warning { color: #ccb577; background-color: #342a10; border-color: #50441b; }
html[data-theme="dark"] .alert-warning .alert-link { color: #e0cb98; }
html[data-theme="dark"] .alert-danger { color: #cc8b89; background-color: #341514; border-color: #502321; }
html[data-theme="dark"] .alert-danger .alert-link { color: #e0a8a6; }

/* Breadcrumb */
html[data-theme="dark"] .breadcrumb {
	background-color: var(--dm-bg-surface-alt);
}
html[data-theme="dark"] .breadcrumb > li + li:before { color: var(--dm-text-muted); }
html[data-theme="dark"] .breadcrumb > .active { color: var(--dm-text-muted); }
html[data-theme="dark"] .breadcrumb a { color: var(--dm-link); }
html[data-theme="dark"] .breadcrumb a:hover { color: var(--dm-link-hover); }

/* Forms + input groups */
html[data-theme="dark"] .form-control {
	background-color: var(--dm-input-bg);
	border-color: var(--dm-input-border);
	color: var(--dm-input-text);
}
html[data-theme="dark"] .form-control::-moz-placeholder { color: var(--dm-text-muted); }
html[data-theme="dark"] .form-control:-ms-input-placeholder { color: var(--dm-text-muted); }
html[data-theme="dark"] .form-control::-webkit-input-placeholder { color: var(--dm-text-muted); }
html[data-theme="dark"] .form-control:focus {
	border-color: var(--dm-link);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3), 0 0 6px rgba(79, 168, 255, .4);
}
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] fieldset[disabled] .form-control {
	background-color: var(--dm-bg-surface-alt);
}
html[data-theme="dark"] .input-group-addon {
	background-color: var(--dm-bg-surface-alt);
	border-color: var(--dm-input-border);
	color: var(--dm-text-secondary);
}

/* Tables */
html[data-theme="dark"] .table { color: var(--dm-text-secondary); }
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tfoot > tr > th,
html[data-theme="dark"] .table > thead > tr > td,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > th,
html[data-theme="dark"] .table-bordered > thead > tr > td,
html[data-theme="dark"] .table-bordered > tbody > tr > td {
	border-color: var(--dm-border);
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > th {
	background-color: var(--dm-bg-surface-alt);
}
html[data-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .table-hover > tbody > tr:hover > th {
	background-color: var(--dm-hover-bg);
}
/* Contextual table cells/rows (.active/.success/.info/.warning/.danger) —
   e.g. invoice.php's label column uses td.active, which Bootstrap gives
   a plain light-gray background by default. */
html[data-theme="dark"] .table > tbody > tr > td.active,
html[data-theme="dark"] .table > tbody > tr > th.active,
html[data-theme="dark"] .table > tbody > tr.active > td,
html[data-theme="dark"] .table > tbody > tr.active > th {
	background-color: var(--dm-bg-surface-alt);
	color: var(--dm-text-primary);
}
html[data-theme="dark"] .table > tbody > tr > td.success,
html[data-theme="dark"] .table > tbody > tr > th.success,
html[data-theme="dark"] .table > tbody > tr.success > td,
html[data-theme="dark"] .table > tbody > tr.success > th {
	background-color: #15291a;
	color: #7ab286;
}
html[data-theme="dark"] .table > tbody > tr > td.info,
html[data-theme="dark"] .table > tbody > tr > th.info,
html[data-theme="dark"] .table > tbody > tr.info > td,
html[data-theme="dark"] .table > tbody > tr.info > th {
	background-color: #102432;
	color: #79aecc;
}
html[data-theme="dark"] .table > tbody > tr > td.warning,
html[data-theme="dark"] .table > tbody > tr > th.warning,
html[data-theme="dark"] .table > tbody > tr.warning > td,
html[data-theme="dark"] .table > tbody > tr.warning > th {
	background-color: #342a10;
	color: #ccb577;
}
html[data-theme="dark"] .table > tbody > tr > td.danger,
html[data-theme="dark"] .table > tbody > tr > th.danger,
html[data-theme="dark"] .table > tbody > tr.danger > td,
html[data-theme="dark"] .table > tbody > tr.danger > th {
	background-color: #341514;
	color: #cc8b89;
}

/* Progress bars */
html[data-theme="dark"] .progress {
	background-color: var(--dm-bg-surface-alt);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}

/* Panels */
html[data-theme="dark"] .panel {
	background-color: var(--dm-bg-surface);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .panel-default {
	border-color: var(--dm-border);
}
html[data-theme="dark"] .panel-default > .panel-heading,
html[data-theme="dark"] .panel-footer {
	background-color: var(--dm-bg-surface-alt);
	border-color: var(--dm-border);
	color: var(--dm-text-primary);
}

/* Modals */
html[data-theme="dark"] .modal-content {
	background-color: var(--dm-bg-surface);
	border-color: var(--dm-border-strong);
	box-shadow: 0 3px 9px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .modal-header {
	border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .modal-footer {
	border-top-color: var(--dm-border);
}
html[data-theme="dark"] .modal-title {
	color: var(--dm-text-primary);
}
html[data-theme="dark"] .close {
	color: var(--dm-text-primary);
	text-shadow: none;
	opacity: .6;
}
html[data-theme="dark"] .close:hover,
html[data-theme="dark"] .close:focus {
	color: #fff;
	opacity: .9;
}

/* Pagination */
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
	background-color: var(--dm-bg-surface);
	border-color: var(--dm-border);
	color: var(--dm-link);
}
html[data-theme="dark"] .pagination > li > a:hover,
html[data-theme="dark"] .pagination > li > span:hover,
html[data-theme="dark"] .pagination > li > a:focus,
html[data-theme="dark"] .pagination > li > span:focus {
	background-color: var(--dm-hover-bg);
	border-color: var(--dm-border-strong);
	color: var(--dm-link-hover);
}
html[data-theme="dark"] .pagination > .disabled > a,
html[data-theme="dark"] .pagination > .disabled > span {
	background-color: var(--dm-bg-surface);
	border-color: var(--dm-border);
	color: var(--dm-text-muted);
}

/* Standard Bootstrap contextual buttons (register/login/package/ticket
   forms etc. — used across the site via plain .btn-primary/-success/
   -info/-warning/-danger, darkened same as the other colored buttons) */
html[data-theme="dark"] .btn-primary {
	background-color: #2b5a83;
	border-color: #22527b;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-primary:active,
html[data-theme="dark"] .btn-primary.active {
	background-color: #356a9b;
	border-color: #2b567d;
}
html[data-theme="dark"] .btn-success {
	background-color: #3c783c;
	border-color: #317131;
}
html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] .btn-success:focus,
html[data-theme="dark"] .btn-success:active,
html[data-theme="dark"] .btn-success.active {
	background-color: #4a934a;
	border-color: #3d7d3d;
}
html[data-theme="dark"] .btn-info {
	background-color: #3b7d90;
	border-color: #2e788e;
}
html[data-theme="dark"] .btn-info:hover,
html[data-theme="dark"] .btn-info:focus,
html[data-theme="dark"] .btn-info:active,
html[data-theme="dark"] .btn-info.active {
	background-color: #4a97ae;
	border-color: #3a8ba3;
}
html[data-theme="dark"] .btn-warning {
	background-color: #9c7033;
	border-color: #9b6923;
}
html[data-theme="dark"] .btn-warning:hover,
html[data-theme="dark"] .btn-warning:focus,
html[data-theme="dark"] .btn-warning:active,
html[data-theme="dark"] .btn-warning.active {
	background-color: #b98940;
	border-color: #b3762a;
}
html[data-theme="dark"] .btn-danger {
	background-color: #8d3633;
	border-color: #8a2926;
}
html[data-theme="dark"] .btn-danger:hover,
html[data-theme="dark"] .btn-danger:focus,
html[data-theme="dark"] .btn-danger:active,
html[data-theme="dark"] .btn-danger.active {
	background-color: #a8433f;
	border-color: #a33330;
}

/* ----------------------------------------------------------------
   6. app/views/user/uploadbox_tus.php — targeted inline-style overrides
   ---------------------------------------------------------------- */
html[data-theme="dark"] [id^="url_final"] div[style*="color:#e67e22"] {
	color: #f5a765 !important;
}
html[data-theme="dark"] span[style*="color:#3498db"] {
	color: #6ab7ef !important;
}
/* Delete/reset/copy/copied action buttons — darkened per feedback (too bright/saturated on the dark background) */
html[data-theme="dark"] .delete[style*="#FF0000"] {
	background: #a93226 !important;
	border-color: #a93226 !important;
}
html[data-theme="dark"] .reset[style*="#f0ad4e"] {
	background: #b8792c !important;
	border-color: #96601f !important;
}
html[data-theme="dark"] .input-group-addon[style*="#3980EA"] {
	background: #2a5db8 !important;
	border-color: #2a5db8 !important;
}
html[data-theme="dark"] .input-group-addon[style*="#5CB85C"] {
	background: #3c8c3c !important;
	border-color: #3c8c3c !important;
}

/* ----------------------------------------------------------------
   7. app/views/user/index.php — embedded <style> block overrides
   ---------------------------------------------------------------- */
html[data-theme="dark"] .tile-progress {
	background: var(--dm-bg-surface-alt);
	color: var(--dm-text-primary);
}
html[data-theme="dark"] .tile-progress.tile-aqua {
	background-color: #163a4a;
}
html[data-theme="dark"] .tile-progress .tile-progressbar {
	background: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .tile-progress .tile-footer {
	background: rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .search input[type=text] {
	border-color: var(--dm-input-border);
	background-color: var(--dm-input-bg);
	color: var(--dm-input-text);
	/* css/searchicon.png has an opaque white square baked into the
	   pixels (not transparent), so no background-color can cover it —
	   swap it for an inline SVG icon instead, same position/repeat. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%23c7cbd1' stroke-width='1.6'/%3E%3Cline x1='11' y1='11' x2='15' y2='15' stroke='%23c7cbd1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .foldernav a {
	color: var(--dm-text-secondary);
}
html[data-theme="dark"] .foldernav a:hover {
	color: var(--dm-link-hover);
}
html[data-theme="dark"] .selected_record {
	background-color: var(--dm-hover-bg);
}
html[data-theme="dark"] .dcpybtn,
html[data-theme="dark"] .cpybtn {
	background-color: #2a5db8;
	border-color: #2a5db8;
}
html[data-theme="dark"] .linkright {
	color: var(--dm-text-secondary);
}

/* Folder-name / folder-nav labels use an inline color identical to the
   site's default light-mode text color (#404040) — overridden only in
   dark mode, light mode is left untouched since these spans sit inside
   <a> links and removing the inline color would also change their
   light-mode appearance. */
html[data-theme="dark"] span[style*="color:#404040"] {
	color: var(--dm-text-primary) !important;
}

/* app/views/user/index.php — true inline style="" attributes (need !important) */
html[data-theme="dark"] .input-group[style*="background-color: aliceblue"] {
	background-color: var(--dm-bg-surface-alt) !important;
}
html[data-theme="dark"] a.btn-info[style*="#00BCEA"] {
	background-color: #163a4a !important;
	border-color: #2f6fd6 !important;
	color: #dff0ff !important;
}
html[data-theme="dark"] a[style*="color:#006699"] {
	color: var(--dm-link-hover) !important;
}
html[data-theme="dark"] span[style*="color:#ffff66"] {
	color: #f2f2a0 !important;
}

/* ----------------------------------------------------------------
   8. Other pages with hardcoded colors
   ---------------------------------------------------------------- */
/* app/views/user/order.php (?type=package) — package option cards */
html[data-theme="dark"] .border[style*="background: #fbfbfb"] {
	background: var(--dm-bg-surface) !important;
}
html[data-theme="dark"] div[style*="color: #4c4a4a"] {
	color: var(--dm-text-primary) !important;
	border-bottom-color: var(--dm-border) !important;
}
/* app/views/site/terms.php — "موارد غیر مجاز" list */
html[data-theme="dark"] .site-about ul[style*="color:#333333"] {
	color: var(--dm-text-secondary) !important;
}

/* ----------------------------------------------------------------
   9. Mobile navbar dropdown (account menu popup, style.css)
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
	html[data-theme="dark"] .navbar-collapse.navbar-left .navbar-nav .open .dropdown-menu {
		background-color: var(--dm-bg-dropdown);
		border-color: var(--dm-border-strong);
		box-shadow: 0 6px 12px rgba(0, 0, 0, .5);
	}
}