/**
 * myfans ダウンローダー UI スタイル
 * 配色はテーマと共用の CSS 変数があればそれを継承、なければ既定値を使う。
 */

.mfdl-app {
	--mfdl-pink: #ff4d8d;
	--mfdl-purple: #8b5cf6;
	--mfdl-radius: 12px;
	--mfdl-border: #e5e0ec;
	--mfdl-bg-soft: #faf8fc;
	--mfdl-text: #2b2333;
	--mfdl-text-sub: #6f6678;
	--mfdl-space-xs: 8px;
	--mfdl-space-s: 12px;
	--mfdl-space-m: 20px;
	--mfdl-focus: 0 0 0 3px rgba(139, 92, 246, .35);
	display: block;
	max-width: 720px;
	margin: 0 auto;
	color: var(--mfdl-text);
	font-size: 16px;
	line-height: 1.7;
}

.mfdl-app :where(p, li, summary, label, button, input, textarea) {
	overflow-wrap: break-word;
}
.mfdl-app :where(p, li, summary, label, h2) {
	word-break: auto-phrase;
	line-break: strict;
}

.mfdl-section {
	margin-bottom: var(--mfdl-space-m);
	padding: clamp(16px, 3vw, 20px);
	background: var(--mfdl-bg-soft);
	border: 1px solid var(--mfdl-border);
	border-radius: var(--mfdl-radius);
}

.mfdl-section__title {
	margin: 0 0 var(--mfdl-space-s);
	font-size: clamp(.98rem, .9rem + .4vw, 1.08rem);
	font-weight: 700;
}

/* --- ボタン: ラベル折り返し禁止・高さ揃え・44px タップ領域 --- */
.mfdl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	max-width: 100%;
	padding: 10px 22px;
	border: 2px solid var(--mfdl-purple);
	border-bottom-width: 4px;
	border-radius: 14px;
	background: #fff;
	color: var(--mfdl-purple);
	font-weight: 800;
	font-size: .95rem;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 2px 0 rgba(20, 10, 40, .18);
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, filter .12s ease;
}

.mfdl-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(139, 92, 246, .35); filter: brightness(1.04); }
.mfdl-btn:active { transform: translateY(1px); border-bottom-width: 2px; box-shadow: 0 1px 0 rgba(20, 10, 40, .18); }
.mfdl-btn:disabled {
	opacity: .5;
	filter: grayscale(.4);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.mfdl-btn:focus-visible {
	outline: none;
	box-shadow: var(--mfdl-focus);
}

.mfdl-btn--primary {
	background: linear-gradient(135deg, #ff5fa2 0%, var(--mfdl-pink) 45%, var(--mfdl-purple) 100%);
	border: 2px solid #b13a86;
	border-bottom-width: 4px;
	border-top-color: rgba(255, 255, 255, .35);
	color: #fff;
	text-shadow: 0 1px 2px rgba(60, 0, 40, .35);
}

.mfdl-btn--small { min-height: 36px; padding: 6px 16px; font-size: .85rem; }
.mfdl-btn--block { display: flex; width: 100%; padding: 14px; font-size: 1.05rem; }

/* --- URL 入力 --- */
.mfdl-urlbox { display: flex; gap: 8px; align-items: stretch; }

.mfdl-urlbox__input {
	flex: 1 1 0;
	min-width: 0;
	height: 44px;
	padding: 12px 14px;
	border: 1px solid var(--mfdl-border);
	border-radius: 10px;
	font-size: .95rem;
	background: #fff;
	color: inherit;
	text-overflow: ellipsis;
}

.mfdl-urlbox__input:focus {
	outline: 2px solid var(--mfdl-purple);
	outline-offset: 1px;
	border-color: transparent;
}

.mfdl-urlbox__preview { margin: var(--mfdl-space-xs) 0 0; font-size: .85rem; min-height: 1.2em; overflow-wrap: anywhere; }
.mfdl-urlbox__preview--ok { color: #1a9e54; }
.mfdl-urlbox__preview--invalid { color: #d33; }

.mfdl-hint { margin: var(--mfdl-space-xs) 0 0; font-size: .82rem; color: var(--mfdl-text-sub); }
.mfdl-hint code { background: rgba(139, 92, 246, .1); padding: 1px 5px; border-radius: 4px; }

.mfdl-dl-empty {
	margin: 0;
	padding: var(--mfdl-space-s) var(--mfdl-space-m);
	border: 1px dashed var(--mfdl-border);
	border-radius: 10px;
	background: rgba(139, 92, 246, .05);
}

/* --- 検索: 折りたたみ中も「入力できる場」だと分かるデザイン --- */
.mfdl-search { transition: border-color .12s ease; }
.mfdl-search[open] { border-color: var(--mfdl-purple); }

.mfdl-search__summary {
	display: block;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2em;
}

.mfdl-search__summary::-webkit-details-marker { display: none; }

/* 開閉矢印（右端・縦中央） */
.mfdl-search__summary::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: .55em;
	height: .55em;
	border-right: 2px solid var(--mfdl-purple);
	border-bottom: 2px solid var(--mfdl-purple);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .15s ease;
}

.mfdl-search[open] .mfdl-search__summary::after { transform: translateY(-30%) rotate(-135deg); }

.mfdl-search__heading {
	display: block;
	pointer-events: none;
}

/* 閉じているときの擬似入力欄: タップして開くことを示す */
.mfdl-search__fake-input {
	display: flex;
	align-items: center;
	margin-top: var(--mfdl-space-s);
	padding: 0 14px;
	height: 44px;
	border: 1px solid var(--mfdl-border);
	border-radius: 10px;
	background: #fff;
	color: var(--mfdl-text-sub);
	font-size: .9rem;
	overflow: hidden;
}

.mfdl-search__fake-placeholder {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mfdl-search[open] .mfdl-search__fake-input { display: none; }

.mfdl-search__body { margin-top: var(--mfdl-space-s); }

.mfdl-search__results { margin-top: var(--mfdl-space-s); display: grid; gap: var(--mfdl-space-xs); }

.mfdl-result {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px;
	border: 1px solid var(--mfdl-border);
	border-radius: 10px;
	background: #fff;
	text-align: left;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease;
	font-size: .9rem;
	color: inherit;
}

.mfdl-result:hover { border-color: var(--mfdl-purple); box-shadow: 0 2px 10px rgba(139, 92, 246, .15); }
.mfdl-result img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; flex: none; }
.mfdl-result__body { display: flex; flex-direction: column; min-width: 0; }
.mfdl-result__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfdl-result__meta { font-size: .78rem; color: var(--mfdl-text-sub); }

/* --- ステータス --- */
.mfdl-status { font-size: .85rem; margin-left: 8px; }
.mfdl-status--ok { color: #1a9e54; }
.mfdl-status--ng { color: #d33; }
/* 進捗詳細行（高速更新の処理演出テキスト） */
.mfdl-status--detail {
	display: block;
	margin: 6px 0 0;
	font-size: .78rem;
	color: var(--mfdl-muted, #8a8a9a);
	font-variant-numeric: tabular-nums;
	min-height: 1.2em;
	letter-spacing: .02em;
}
@media (prefers-color-scheme: dark) {
	.mfdl-status--detail { color: var(--mfdl-muted-dark, #a0a0b4); }
}

/* --- 作品表示 --- */
.mfdl-post__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.mfdl-post__thumb { width: 128px; border-radius: 10px; flex: none; }
.mfdl-post__title { margin: 0; font-weight: 700; }
.mfdl-post__meta { margin: 4px 0 0; font-size: .82rem; color: var(--mfdl-text-sub); }

.mfdl-media { display: grid; gap: 8px; margin-bottom: 14px; }
.mfdl-media__images { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mfdl-media__images img { width: 100%; border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; }
.mfdl-media__images .mfdl-hint { grid-column: 1 / -1; margin: 0; }

.mfdl-check { display: flex; align-items: center; gap: 8px; font-size: .92rem; cursor: pointer; }
.mfdl-check input { width: 18px; height: 18px; accent-color: var(--mfdl-purple); }

.mfdl-local-note { font-size: .78rem; color: #b45309; }

.mfdl-options {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px dashed var(--mfdl-border);
	border-radius: 10px;
	display: grid;
	gap: 10px;
}
.mfdl-options legend { font-size: .8rem; font-weight: 700; color: var(--mfdl-text-sub); padding: 0 6px; }

/* --- 進捗 --- */
.mfdl-progress__steps {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	counter-reset: mfdlstep;
}

.mfdl-progress__steps li {
	counter-increment: mfdlstep;
	flex: 1;
	text-align: center;
	font-size: .8rem;
	padding: 8px 4px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var(--mfdl-border);
	color: var(--mfdl-text-sub);
}

.mfdl-progress__steps li::before {
	content: counter(mfdlstep) ". ";
	font-weight: 700;
}

.mfdl-progress__steps li.is-active {
	border-color: var(--mfdl-purple);
	color: var(--mfdl-purple);
	font-weight: 700;
}

.mfdl-progress__steps li.is-done {
	background: linear-gradient(135deg, rgba(255, 77, 141, .12), rgba(139, 92, 246, .12));
	border-color: transparent;
	color: var(--mfdl-text);
}

.mfdl-progress__bar {
	height: 10px;
	border-radius: 999px;
	background: #ece6f2;
	overflow: hidden;
}

.mfdl-progress__fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--mfdl-pink), var(--mfdl-purple));
	transition: width .25s ease;
}

/* --- トースト: モバイルでは画面端に食いつかない余白 --- */
.mfdl-toast {
	position: sticky;
	bottom: 16px;
	margin: var(--mfdl-space-s) 8px 0;
	padding: 12px 16px;
	border-radius: 10px;
	background: #2b2333;
	color: #fff;
	font-size: .88rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	overflow-wrap: anywhere;
}

.mfdl-toast--warn { background: #92610b; }

/* --- ダークモード --- */
@media (prefers-color-scheme: dark) {
	.mfdl-app {
		--mfdl-border: #3d3547;
		--mfdl-bg-soft: #241d2c;
		--mfdl-text: #f2edf7;
		--mfdl-text-sub: #a89db5;
	}

	.mfdl-btn:not(.mfdl-btn--primary) { background: #fff; }   /* primary はグラデを維持（background ショートハンドで上書きすると壊れる） */
	.mfdl-urlbox__input,
	.mfdl-result,
	.mfdl-search__fake-input,
	.mfdl-progress__steps li { background: #1d1723; }
	.mfdl-dl-empty { background: rgba(139, 92, 246, .12); }
	.mfdl-progress__bar { background: #3d3547; }
	.mfdl-toast { background: #f2edf7; color: #2b2333; }
	.mfdl-toast--warn { background: #fbbf24; color: #442c00; }
}

/* --- 狭い画面 --- */
@media (max-width: 560px) {
	/* 検索ボタンは入力欄の下にフル幅で */
	.mfdl-urlbox { flex-wrap: wrap; }
	.mfdl-urlbox .mfdl-btn { flex: 1 1 100%; }

	.mfdl-post__head { flex-direction: column; }
	.mfdl-post__thumb { width: 100%; }
	.mfdl-media__images { grid-template-columns: repeat(3, 1fr); }
	.mfdl-progress__steps li { font-size: .7rem; padding: 8px 2px; }
}

/* QR 案内（読み取り手順・メリット） */
.mfdl-qr-hint {
	margin: 4px 0 14px 26px;
	padding: 10px 14px;
	border: 1px dashed var(--mfdl-border, #e2d9ef);
	border-radius: 10px;
	font-size: .8rem;
	line-height: 1.75;
	color: var(--mfdl-text-sub, #6f6579);
}
.mfdl-qr-hint p { margin: 0 0 6px; }
.mfdl-qr-hint p:last-child { margin-bottom: 0; }
.mfdl-qr-hint b { color: var(--mfdl-purple, #8b5cf6); }
.mfdl-qr-hint__how { font-size: .76rem; opacity: .92; }
@media (prefers-color-scheme: dark) {
	.mfdl-qr-hint { color: var(--mfdl-text-sub, #a89db5); }
}
/* 所要時間の目安 */
.mfdl-progress__eta { margin: 8px 0 0; font-size: .76rem; color: var(--mfdl-text-sub, #6f6579); line-height: 1.7; }
.mfdl-progress__eta b { color: var(--mfdl-purple, #8b5cf6); }
@media (prefers-color-scheme: dark) { .mfdl-progress__eta { color: var(--mfdl-text-sub, #a89db5); } }