/* ===================== پرامپت هوش مصنوعی - استایل فرانت‌اند ===================== */
.apb-app {
	--apb-primary: #6C5CE7;
	--apb-primary-dark: #5344d6;
	--apb-accent: #00C2FF;
	--apb-bg: #f7f7fb;
	--apb-card-bg: #ffffff;
	--apb-text: #1f2130;
	--apb-text-muted: #6b6f85;
	--apb-border: #e7e7f0;
	--apb-success: #17b26a;
	--apb-error: #f04438;
	--apb-radius: 16px;
	--apb-shadow: 0 4px 24px rgba(30, 20, 90, 0.07);

	font-family: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
	background: var(--apb-bg);
	color: var(--apb-text);
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
	line-height: 1.9;
}
.apb-app *, .apb-app *::before, .apb-app *::after { box-sizing: border-box; }
.apb-app [hidden] { display: none !important; }

/* ---------- Header ---------- */
.apb-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	background: linear-gradient(135deg, var(--apb-primary), var(--apb-accent));
	border-radius: var(--apb-radius);
	padding: 28px 32px;
	color: #fff;
	margin-bottom: 20px;
}
.apb-header-title { display: flex; align-items: center; gap: 14px; }
.apb-logo { font-size: 40px; }
.apb-header-title h1 { margin: 0; font-size: 24px; }
.apb-subtitle { margin: 4px 0 0; opacity: .9; font-size: 14px; }
.apb-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.apb-account-badge {
	padding: 8px 16px;
	border-radius: 30px;
	font-size: 13px;
	font-weight: 600;
	background: rgba(255,255,255,.18);
}
.apb-account-badge.is-active { background: rgba(23, 178, 106, .25); }
.apb-account-badge.is-inactive { background: rgba(255,255,255,.15); }

/* ---------- Buttons ---------- */
.apb-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	border-radius: 10px;
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
	text-decoration: none;
	font-family: inherit;
}
.apb-btn:hover { transform: translateY(-1px); }
.apb-btn-primary { background: #fff; color: var(--apb-primary-dark); }
.apb-btn-primary:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.apb-panel .apb-btn-primary,
.apb-plan-card .apb-btn-primary,
.apb-account-status .apb-btn-primary {
	background: linear-gradient(135deg, var(--apb-primary), var(--apb-accent));
	color: #fff;
}
.apb-btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.apb-btn-outline:hover { background: rgba(255,255,255,.15); }
.apb-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- Alerts ---------- */
.apb-alert { padding: 14px 20px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; font-weight: 600; }
.apb-alert-success { background: #e7f9f0; color: #0a7a44; border: 1px solid #b7ecd2; }
.apb-alert-error { background: #fdeeed; color: #b3261e; border: 1px solid #f6c6c2; }

/* ---------- Tabs ---------- */
.apb-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	background: var(--apb-card-bg);
	border-radius: var(--apb-radius);
	padding: 8px;
	margin-bottom: 20px;
	box-shadow: var(--apb-shadow);
}
.apb-tab {
	flex: 1 0 auto;
	white-space: nowrap;
	background: transparent;
	border: none;
	padding: 12px 18px;
	border-radius: 10px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--apb-text-muted);
	cursor: pointer;
	transition: all .15s ease;
}
.apb-tab:hover { background: #f1f1fa; }
.apb-tab.active { background: linear-gradient(135deg, var(--apb-primary), var(--apb-accent)); color: #fff; }

.apb-panel-title { margin-top: 0; }

/* ---------- Toolbar / Search ---------- */
.apb-toolbar { margin-bottom: 18px; }
.apb-search-box {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--apb-card-bg);
	border: 1.5px solid var(--apb-border);
	border-radius: 12px;
	padding: 12px 18px;
	max-width: 480px;
	box-shadow: var(--apb-shadow);
}
.apb-search-box input {
	border: none;
	outline: none;
	flex: 1;
	font-size: 14px;
	font-family: inherit;
	background: transparent;
	color: var(--apb-text);
}

/* ---------- Layout: categories + grid ---------- */
.apb-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
@media (max-width: 780px) {
	.apb-layout { grid-template-columns: 1fr; }
	.apb-categories { flex-direction: row !important; overflow-x: auto; }
}

.apb-categories {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--apb-card-bg);
	border-radius: var(--apb-radius);
	padding: 12px;
	box-shadow: var(--apb-shadow);
	position: sticky;
	top: 12px;
}
.apb-cat-btn {
	text-align: right;
	background: transparent;
	border: none;
	padding: 10px 14px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	color: var(--apb-text-muted);
	cursor: pointer;
	white-space: nowrap;
}
.apb-cat-btn:hover { background: #f1f1fa; }
.apb-cat-btn.active { background: #efedfe; color: var(--apb-primary-dark); font-weight: 700; }

.apb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
}
.apb-card {
	background: var(--apb-card-bg);
	border-radius: var(--apb-radius);
	padding: 20px;
	box-shadow: var(--apb-shadow);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
	border: 1.5px solid transparent;
	position: relative;
}
.apb-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(30,20,90,.12); border-color: var(--apb-border); }
.apb-card-icon { font-size: 30px; margin-bottom: 10px; }
.apb-card-title { margin: 0 0 6px; font-size: 15px; padding-left: 30px; }
.apb-card-desc { margin: 0 0 12px; font-size: 12.5px; color: var(--apb-text-muted); min-height: 34px; }
.apb-card-tag { display: inline-block; font-size: 11px; background: #f1f1fa; color: var(--apb-primary-dark); padding: 4px 10px; border-radius: 20px; }
.apb-card-footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.apb-card-popular { display: inline-block; font-size: 11px; background: #fff1e0; color: #b3591a; padding: 4px 10px; border-radius: 20px; }

.apb-fav-btn {
	position: absolute;
	top: 14px;
	left: 14px;
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: #cfcfe0;
	padding: 4px;
	transition: color .15s ease, transform .15s ease;
}
.apb-fav-btn:hover { transform: scale(1.15); }
.apb-fav-btn.is-active { color: #f5a623; }
.apb-fav-btn-modal {
	position: static;
	font-size: 24px;
	margin-inline-start: 8px;
}
.apb-modal-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.apb-modal-header-row h2 { margin: 0; }
.apb-modal-cat-tag { display: inline-block; margin-bottom: 10px; }

.apb-empty { text-align: center; color: var(--apb-text-muted); padding: 40px 0; }

/* ---------- AI Build panel ---------- */
.apb-ai-build {
	background: var(--apb-card-bg);
	border-radius: var(--apb-radius);
	padding: 28px;
	box-shadow: var(--apb-shadow);
	max-width: 700px;
}
.apb-ai-build h2 { margin-top: 0; }
#apb-ai-input {
	width: 100%;
	border: 1.5px solid var(--apb-border);
	border-radius: 12px;
	padding: 14px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
	margin: 12px 0 16px;
}
.apb-ai-result {
	margin-top: 20px;
	padding: 18px;
	border-radius: 12px;
	background: #f7f7fd;
	border: 1.5px dashed var(--apb-border);
}

/* ---------- Plans ---------- */
.apb-plans-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}
.apb-plans-grid-compact { margin-top: 16px; }
.apb-plan-card {
	position: relative;
	background: var(--apb-card-bg);
	border-radius: var(--apb-radius);
	padding: 26px 20px;
	text-align: center;
	box-shadow: var(--apb-shadow);
	border: 1.5px solid var(--apb-border);
}
.apb-plan-card.is-featured { border-color: var(--apb-primary); }
.apb-plan-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, var(--apb-primary), var(--apb-accent));
	color: #fff;
	font-size: 11px;
	padding: 4px 14px;
	border-radius: 20px;
}
.apb-plan-card h3 { margin: 6px 0 14px; font-size: 16px; }
.apb-plan-price { font-size: 22px; font-weight: 800; color: var(--apb-primary-dark); margin-bottom: 4px; }
.apb-plan-price span { font-size: 12px; font-weight: 400; color: var(--apb-text-muted); }
.apb-plan-duration { font-size: 12.5px; color: var(--apb-text-muted); margin-bottom: 18px; }

/* ---------- Account ---------- */
.apb-account-status {
	background: var(--apb-card-bg);
	border-radius: var(--apb-radius);
	padding: 20px 24px;
	box-shadow: var(--apb-shadow);
	margin-bottom: 20px;
}
.apb-account-status.is-active { border-right: 4px solid var(--apb-success); }
.apb-account-status.is-inactive { border-right: 4px solid var(--apb-error); }
.apb-table { width: 100%; border-collapse: collapse; background: var(--apb-card-bg); border-radius: 12px; overflow: hidden; box-shadow: var(--apb-shadow); margin-bottom: 24px; }
.apb-table th, .apb-table td { padding: 10px 14px; font-size: 13px; text-align: right; border-bottom: 1px solid var(--apb-border); }
.apb-table th { background: #f7f7fd; color: var(--apb-text-muted); }

/* ---------- Modal ---------- */
.apb-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.apb-modal-overlay { position: absolute; inset: 0; background: rgba(20, 15, 50, .55); }
.apb-modal-content {
	position: relative;
	background: var(--apb-card-bg);
	border-radius: var(--apb-radius);
	max-width: 560px;
	width: 100%;
	max-height: 86vh;
	overflow-y: auto;
	padding: 28px;
	box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.apb-modal-close {
	position: absolute;
	top: 14px;
	left: 14px;
	background: #f1f1fa;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 18px;
	cursor: pointer;
	color: var(--apb-text-muted);
}
.apb-loader { text-align: center; padding: 40px 0; color: var(--apb-text-muted); }

/* form fields inside modal */
.apb-field { margin-bottom: 14px; }
.apb-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.apb-field input[type=text], .apb-field input[type=number], .apb-field textarea, .apb-field select {
	width: 100%;
	border: 1.5px solid var(--apb-border);
	border-radius: 10px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 13.5px;
	background: #fff;
	color: var(--apb-text);
}
.apb-field textarea { resize: vertical; min-height: 70px; }
.apb-required-star { color: var(--apb-error); }

.apb-result-box {
	margin-top: 18px;
	background: #f7f7fd;
	border: 1.5px dashed var(--apb-border);
	border-radius: 12px;
	padding: 16px;
}
.apb-result-box textarea {
	width: 100%;
	min-height: 160px;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 13.5px;
	resize: vertical;
	color: var(--apb-text);
}
.apb-copy-btn { margin-top: 10px; }

.apb-paywall { text-align: center; padding: 10px 0; }
.apb-paywall-icon { font-size: 40px; margin-bottom: 10px; }

.apb-inline-error {
	background: #fdeeed;
	color: #b3261e;
	border: 1px solid #f6c6c2;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	margin-top: 12px;
}

.apb-ios-hint {
	position: fixed;
	bottom: 16px;
	right: 16px;
	left: 16px;
	max-width: 420px;
	margin: 0 auto;
	background: #1f2130;
	color: #fff;
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 13px;
	z-index: 9998;
	box-shadow: 0 10px 30px rgba(0,0,0,.3);
}