html[data-theme="dark"] {
	--tw-settings-scrim: rgba(0, 0, 0, 0.62);
	--tw-settings-bg: #1f2937;
	--tw-settings-nav-bg: #222326;
	--tw-settings-panel-bg: #1f2937;
	--tw-settings-text: #f7fafc;
	--tw-settings-muted: #c4cedb;
	--tw-settings-border: rgba(255, 255, 255, 0.13);
	--tw-settings-hover: rgba(255, 255, 255, 0.08);
	--tw-settings-selected: #333438;
	--tw-settings-control: #111827;
	--tw-settings-accent: #1d465e;
	--tw-settings-accent-hover: #24526c;
	--tw-settings-scrollbar-thumb: #38485d;
	--tw-settings-danger-text: #ffb4a8;
	--tw-settings-blue-text: #8bd3ff;
	--tw-settings-green-text: #7dd3a8;
}

html[data-theme="light"] {
	--tw-settings-scrim: rgba(15, 23, 42, 0.34);
	--tw-settings-bg: #ffffff;
	--tw-settings-nav-bg: #f4f6f8;
	--tw-settings-panel-bg: #ffffff;
	--tw-settings-text: #172033;
	--tw-settings-muted: #5d697a;
	--tw-settings-border: rgba(15, 23, 42, 0.13);
	--tw-settings-hover: rgba(15, 23, 42, 0.06);
	--tw-settings-selected: #e7ebf0;
	--tw-settings-control: #ffffff;
	--tw-settings-accent: #1d465e;
	--tw-settings-accent-hover: #24526c;
	--tw-settings-scrollbar-thumb: #c1c2c7;
	--tw-settings-danger-text: #f58674;
	--tw-settings-blue-text: #169df0;
	--tw-settings-green-text: green;
}

.tw-settings-open {
	overflow: hidden;
}

.tw-settings-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	color: var(--tw-settings-text);
	font-family: Inter, "Open Sans", Roboto, Arial, sans-serif;
}

.tw-settings-scrim {
	position: absolute;
	inset: 0;
	background: var(--tw-settings-scrim);
}

.tw-settings-dialog {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(760px, calc(100vw - 36px));
	height: min(540px, calc(100vh - 36px));
	display: grid;
	grid-template-columns: 160px 1fr;
	background: var(--tw-settings-bg);
	border: 1px solid var(--tw-settings-border);
	border-radius: 12px;
	box-shadow: 0 18px 54px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	outline: none;
}

.tw-settings-nav {
	background: var(--tw-settings-nav-bg);
	border-right: 1px solid var(--tw-settings-border);
	padding: 12px 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tw-settings-nav button {
	min-height: 34px;
	border: 0;
	border-radius: 7px;
	padding: 0 10px;
	background: transparent;
	color: var(--tw-settings-text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	text-align: left;
}

.tw-settings-nav button:hover {
	background: var(--tw-settings-hover);
}

.tw-settings-nav button.selected {
	background: var(--tw-settings-selected);
}

.tw-settings-nav .tw-settings-close {
	width: 34px;
	padding: 0;
	justify-content: center;
	margin-bottom: 8px;
	background: var(--tw-settings-selected);
}

.tw-settings-nav .mat-icon {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 18px;
	flex: 0 0 18px;
	overflow: hidden;
}

.tw-settings-panel {
	background: var(--tw-settings-panel-bg);
	padding: 22px 22px;
	overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tw-settings-scrollbar-thumb) transparent;
}

.tw-settings-title {
	margin: 0 0 20px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--tw-settings-border);
	color: var(--tw-settings-text);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0;
}

.tw-settings-panel-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: transparent;
}

.tw-settings-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 12px 0;
	border-bottom: 1px solid var(--tw-settings-border);
}

.tw-settings-row-title {
	color: var(--tw-settings-text);
	font-size: 17px;
	font-weight: 600;
}

.tw-settings-row-note {
	margin-top: 4px;
	color: var(--tw-settings-muted);
	font-size: 13px;
}

.tw-settings-setting {
	border-bottom: 1px solid var(--tw-settings-border);
	padding-bottom: 12px;
}

.tw-settings-setting .tw-settings-row {
	border-bottom: 0;
	padding-bottom: 4px;
}

.tw-settings-help {
	color: var(--tw-settings-muted);
	font-size: 12px;
	line-height: 1.45;
	max-width: 560px;
}

.tw-settings-account-card {
	border: 1px solid var(--tw-settings-border);
	border-radius: 8px;
	background: var(--tw-settings-control);
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

.tw-settings-account-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	margin: 0;
	padding: 0;
	background: transparent!important;
	color: var(--tw-settings-text);
}

body .tw-settings-modal form.tw-settings-account-form,
body .tw-settings-modal form.tw-settings-profile-form {
	max-width: none!important;
	min-height: 0!important;
	background: transparent!important;
	border: 0!important;
	box-shadow: none!important;
}

body .tw-settings-modal form.tw-settings-account-form > .tw-settings-account-card,
body .tw-settings-modal form.tw-settings-account-form > .tw-settings-password-card,
body .tw-settings-modal form.tw-settings-account-form > .tw-settings-action-list,
body .tw-settings-modal form.tw-settings-account-form > .tw-settings-section-rule {
	width: 100%!important;
	max-width: 100%!important;
	margin-left: 0!important;
	margin-right: 0!important;
	align-self: stretch!important;
}

.tw-settings-profile-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	margin: 0;
	padding: 0;
	background: transparent!important;
	color: var(--tw-settings-text);
}

.tw-settings-profile-card {
	border: 1px solid var(--tw-settings-border);
	border-radius: 8px;
	background: var(--tw-settings-control);
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

body .tw-settings-modal form.tw-settings-profile-form > .tw-settings-profile-card {
	width: 100%!important;
	max-width: 100%!important;
	margin-left: 0!important;
	margin-right: 0!important;
	align-self: stretch!important;
}

.tw-settings-field-row {
	display: grid;
	grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--tw-settings-border);
}

body .tw-settings-modal form.tw-settings-account-form .tw-settings-field-row {
	margin: 0!important;
	width: auto!important;
	background: transparent!important;
}

.tw-settings-profile-row {
	display: grid;
	grid-template-columns: minmax(126px, 0.28fr) minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--tw-settings-border);
}

.tw-settings-profile-card .tw-settings-profile-row:last-of-type {
	border-bottom: 0;
}

body .tw-settings-modal form.tw-settings-profile-form .tw-settings-profile-row {
	margin: 0!important;
	width: auto!important;
	background: transparent!important;
}

.tw-settings-profile-control {
	min-width: 0;
	display: block;
}

.tw-settings-field-label {
	color: var(--tw-settings-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.tw-settings-modal .tw-settings-field-row input {
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	height: 34px;
	border: 1px solid var(--tw-settings-border);
	border-radius: 7px!important;
	background: var(--tw-settings-bg)!important;
	color: var(--tw-settings-text)!important;
	font: inherit;
	font-size: 13px;
	padding: 0 10px;
	box-shadow: none!important;
}

.tw-settings-modal .tw-settings-profile-row input,
.tw-settings-modal .tw-settings-profile-row select,
.tw-settings-modal .tw-settings-profile-row textarea {
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--tw-settings-border);
	border-radius: 7px!important;
	background: var(--tw-settings-bg)!important;
	color: var(--tw-settings-text)!important;
	font: inherit;
	font-size: 13px;
	padding: 0 10px;
	box-shadow: none!important;
}

.tw-settings-modal .tw-settings-profile-row input,
.tw-settings-modal .tw-settings-profile-row select {
	height: 34px;
}

.tw-settings-modal .tw-settings-profile-row textarea {
	min-height: 86px;
	padding: 9px 10px;
	resize: vertical;
	line-height: 1.4;
}

.tw-settings-visibility {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tw-settings-muted);
	font-size: 12px;
	white-space: nowrap;
}

.tw-settings-visibility input {
	width: 14px!important;
	height: 14px!important;
	margin: 0!important;
	accent-color: var(--tw-settings-accent);
}

.tw-settings-form-msg {
	padding: 8px 14px 10px;
	color: #ffb4a8;
	font-size: 12px;
}

.tw-settings-form-msg:empty {
	display: none;
}

.tw-settings-profile-msg {
	padding: 8px 14px 10px;
	color: #ffb4a8;
	font-size: 12px;
}

.tw-settings-profile-msg:empty {
	display: none;
}

.tw-settings-profile-msg.ok {
	color: #7dd3a8;
}

.tw-settings-section-rule {
	height: 1px;
	width: 100%;
	box-sizing: border-box;
	margin: 16px 0;
	border: 0;
	border-top: 1px solid var(--tw-settings-border);
	background: transparent;
}

.tw-settings-password-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 14px;
	border: 1px solid var(--tw-settings-border);
	border-radius: 8px;
	background: var(--tw-settings-control);
}

.tw-settings-e2ee-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px 16px;
	align-items: center;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 14px;
	border: 1px solid var(--tw-settings-border);
	border-radius: 8px;
	background: var(--tw-settings-control);
}

.tw-settings-e2ee-card.ready {
	border-color: rgba(34, 197, 94, 0.45);
}

.tw-settings-e2ee-status.mat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--tw-settings-bg);
	color: var(--tw-settings-muted);
	font-size: 18px;
}

.tw-settings-e2ee-card.ready .tw-settings-e2ee-status.mat-icon {
	background: #16a34a;
	color: #fff;
}

.tw-settings-e2ee-ready-text {
	color: #7dd3a8;
	font-size: 13px;
	font-weight: 700;
}

.tw-settings-drive-msg {
	grid-column: 1 / -1;
	min-height: 17px;
	color: #ffb4a8;
	font-size: 12px;
}

.tw-settings-drive-msg:empty {
	display: none;
}

.tw-settings-drive-msg.ok {
	color: #7dd3a8;
}

.tw-settings-password-row {
	display: grid;
	grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	color: var(--tw-settings-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.tw-settings-modal .tw-settings-password-row input {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	height: 34px;
	border: 1px solid var(--tw-settings-border);
	border-radius: 7px!important;
	background: var(--tw-settings-bg)!important;
	color: var(--tw-settings-text)!important;
	font: inherit;
	font-size: 13px;
	padding: 0 10px;
	box-shadow: none!important;
	text-transform: none;
}

.tw-settings-password-msg {
	min-height: 17px;
	color: #ffb4a8;
	font-size: 12px;
}

.tw-settings-password-msg:empty {
	display: none;
}

.tw-settings-password-msg.ok {
	color: var(--tw-settings-green-text);
}

.tw-settings-inline-help {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	color: var(--tw-settings-muted);
	font-size: 12px;
}

.tw-settings-inline-help button {
	border: 0;
	background: transparent;
	color: var(--tw-settings-blue-text);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
}

.tw-settings-inline-help button:hover {
	text-decoration: underline;
}

.tw-settings-action-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.tw-settings-action-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--tw-settings-border);
	border-radius: 8px;
	background: var(--tw-settings-control);
}

.tw-settings-action-main {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.tw-settings-action-main .mat-icon {
	width: 22px;
	height: 22px;
	font-size: 22px;
	color: var(--tw-settings-muted);
}

.tw-settings-action-row.danger .mat-icon {
	color: var(--tw-settings-danger-text);
}

.tw-settings-secondary {
	min-width: 76px;
	height: 34px;
	border: 1px solid var(--tw-settings-border);
	border-radius: 8px;
	background: transparent;
	color: var(--tw-settings-text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.tw-settings-secondary:hover {
	background: var(--tw-settings-hover);
}

.tw-settings-secondary:disabled {
	opacity: 0.55;
	cursor: default;
}

.tw-settings-action-row.danger .tw-settings-secondary {
	color: var(--tw-settings-danger-text);
}

.tw-settings-billing-plan {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border: 1px solid var(--tw-settings-border);
	border-radius: 8px;
	background: var(--tw-settings-control);
	padding: 16px 18px;
}

.tw-settings-billing-plan-main {
	min-width: 0;
}

.tw-settings-billing-plan-label {
	color: var(--tw-settings-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.tw-settings-billing-plan-name {
	margin-top: 4px;
	color: var(--tw-settings-text);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.tw-settings-billing-upgrade {
	flex: 0 0 auto;
	min-width: 96px;
	margin: 0;
}

.tw-settings-billing-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto;
}

.tw-settings-billing-wallet {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	border: 1px solid var(--tw-settings-border);
	border-radius: 8px;
	background: var(--tw-settings-control);
	padding: 14px 18px;
}

.tw-settings-billing-wallet-main {
	min-width: 0;
}

.tw-settings-billing-wallet-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.tw-settings-billing-wallet-balance {
	margin-top: 4px;
	color: var(--tw-settings-text);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.tw-settings-billing-details {
	border: 1px solid var(--tw-settings-border);
	border-radius: 8px;
	background: var(--tw-settings-control);
	overflow: hidden;
}

.tw-settings-billing-details-head,
.tw-settings-billing-detail-row {
	display: grid;
	grid-template-columns: minmax(130px, 1fr) minmax(96px, 0.75fr) minmax(96px, 0.75fr);
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	border-bottom: 1px solid var(--tw-settings-border);
}

.tw-settings-billing-details-head {
	color: var(--tw-settings-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.tw-settings-billing-detail-row {
	color: var(--tw-settings-text);
	font-size: 14px;
}

.tw-settings-billing-detail-row:last-child {
	border-bottom: 0;
}

.tw-settings-billing-usage-value {
	display: block;
	line-height: 1.25;
}

.tw-settings-billing-usage-mode {
	display: block;
	color: var(--tw-settings-text);
	font-size: 14px;
	line-height: 1.25;
}

.tw-settings-billing-usage-mode + .tw-settings-billing-usage-mode {
	margin-top: 3px;
}

.tw-settings-inline-recharge {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	margin-top: 6px;
	padding: 0 10px;
	border: 1px solid var(--tw-settings-border);
	border-radius: 7px;
	color: var(--tw-settings-muted);
	background: transparent;
	font-size: 12px;
	font-weight: 600;
}

.tw-settings-billing-usage-meta {
	display: block;
	margin-top: 3px;
	color: var(--tw-settings-muted);
	font-size: 12px;
	line-height: 1.25;
}

.tw-settings-storage-breakdown {
	display: grid;
	gap: 4px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--tw-settings-border);
	color: var(--tw-settings-muted);
	font-size: 12px;
	line-height: 1.25;
}

.tw-settings-storage-breakdown-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.tw-settings-billing-dev-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid var(--tw-settings-border);
	border-radius: 8px;
	background: var(--tw-settings-control);
}

.tw-settings-info-row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 14px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--tw-settings-border);
}

.tw-settings-info-row:last-child {
	border-bottom: 0;
}

.tw-settings-info-label {
	color: var(--tw-settings-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.tw-settings-info-value {
	color: var(--tw-settings-text);
	font-size: 13px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.tw-settings-theme-select,
.tw-settings-language-button {
	min-width: 160px;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid var(--tw-settings-border);
	background: var(--tw-settings-control);
	color: var(--tw-settings-text);
	font: inherit;
}

.tw-settings-language-button {
	cursor: pointer;
	text-align: left;
}

html[data-theme="dark"] .tw-settings-theme-select {
	color-scheme: dark;
}

html[data-theme="dark"] .tw-settings-theme-select option {
	background: var(--tw-settings-control);
	color: var(--tw-settings-text);
}

.tw-settings-open #langSlctnDlg {
	z-index: 100001!important;
}

.tw-settings-open #langSlctnDlg.tw-settings-lang-picker {
	max-height: calc(100vh - 48px);
	box-sizing: border-box;
	overflow: hidden;
}

.tw-settings-open #langSlctnDlg.tw-settings-lang-picker .gDiag-header,
.tw-settings-open #langSlctnDlg.tw-settings-lang-picker .gDiag-buttonarea {
	flex: 0 0 auto;
}

.tw-settings-open #langSlctnDlg.tw-settings-lang-picker .gDiag-content-container {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.tw-settings-open #langSlctnDlg.tw-settings-lang-picker .gDiag-content {
	min-height: 0;
}

html[data-theme="dark"] body.tw-settings-open #langSlctnDlg {
	background: #111827!important;
	color: #f7fafc;
	border: 1px solid var(--tw-settings-border);
	box-shadow: 0 18px 54px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .gDiag-header,
html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .gDiag-content-container,
html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .gDiag-content,
html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .gDiag-buttonarea {
	background: #111827;
	color: #f7fafc;
}

html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .gDiag-header {
	background: #202933;
	border-bottom: 1px solid var(--tw-settings-border);
}

html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .gDiag-header a,
html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .gDiag-header .mat-icon,
html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .gDiag-header .fa-icon {
	color: #f7fafc;
}

html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .langOpt {
	color: #c4cedb;
}

html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .langOpt:hover {
	background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .langOpt .primary {
	color: #f7fafc;
}

html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .langOpt .toEn {
	color: #9aa6b6;
}

html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .gDiag-buttonarea {
	border-top: 1px solid var(--tw-settings-border);
}

html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .gDiag-buttonarea .tw-btn {
	background: var(--tw-settings-accent);
	border-color: var(--tw-settings-accent-hover);
	color: #fff;
}

html[data-theme="dark"] body.tw-settings-open #langSlctnDlg .gDiag-buttonarea .tw-btn:hover {
	background: var(--tw-settings-accent-hover);
}

.tw-settings-toggle {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.tw-settings-toggle input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tw-settings-toggle span {
	position: relative;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: rgba(148, 163, 184, 0.55);
	transition: background 0.16s ease;
}

.tw-settings-toggle span::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.16s ease;
}

.tw-settings-toggle input:checked + span {
	background: var(--tw-settings-accent);
}

.tw-settings-toggle input:checked + span::after {
	transform: translateX(18px);
}

.tw-settings-toggle input:disabled + span {
	cursor: not-allowed;
	opacity: 0.55;
}

.tw-settings-actions {
	display: flex;
	justify-content: flex-end;
	padding-top: 4px;
}

.tw-settings-actions.compact {
	padding-top: 0;
}

.tw-settings-save {
	min-width: 82px;
	height: 36px;
	border: 1px solid var(--tw-settings-accent-hover);
	border-radius: 8px;
	background: var(--tw-settings-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.tw-settings-save:hover {
	background: var(--tw-settings-accent-hover);
}

.tw-settings-theme-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.tw-settings-theme-card {
	min-height: 78px;
	border: 1px solid var(--tw-settings-border);
	border-radius: 8px;
	padding: 12px;
	background: var(--tw-settings-control);
	color: var(--tw-settings-text);
	text-align: left;
	cursor: pointer;
}

.tw-settings-theme-card:hover {
	background: var(--tw-settings-hover);
}

.tw-settings-theme-card.selected {
	border-color: var(--tw-settings-accent-hover);
	box-shadow: inset 0 0 0 1px var(--tw-settings-accent-hover);
}

.tw-settings-theme-card-title,
.tw-settings-theme-card-note {
	display: block;
}

.tw-settings-theme-card-title {
	font-size: 14px;
	font-weight: 700;
}

.tw-settings-theme-card-note {
	margin-top: 6px;
	color: var(--tw-settings-muted);
	font-size: 12px;
}

@media (max-width: 720px) {
	.tw-settings-dialog {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		width: 100vw;
		height: 100vh;
		border-radius: 0;
	}

	.tw-settings-nav {
		flex-direction: row;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid var(--tw-settings-border);
	}

	.tw-settings-nav button {
		min-width: max-content;
	}

	.tw-settings-theme-cards {
		grid-template-columns: 1fr;
	}

	.tw-settings-row {
		align-items: stretch;
		flex-direction: column;
	}

	.tw-settings-info-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.tw-settings-billing-plan {
		align-items: stretch;
		flex-direction: column;
	}

	.tw-settings-billing-upgrade {
		width: 100%;
	}

	.tw-settings-billing-actions {
		width: 100%;
	}

	.tw-settings-billing-dev-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.tw-settings-billing-details-head,
	.tw-settings-billing-detail-row {
		grid-template-columns: minmax(96px, 1fr) minmax(72px, 0.75fr) minmax(72px, 0.75fr);
	}

	.tw-settings-field-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.tw-settings-password-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}