/* OpenCampus AI · 轻 SaaS 风格，移动优先 */
.ocai-app {
	max-width: 960px;
	margin: 40px auto;
	padding: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
	color: #1f2937;
}
.ocai-header { text-align: center; margin-bottom: 28px; }
.ocai-header h1 { font-size: 28px; margin: 0 0 6px; }
.ocai-sub { color: #64748b; margin: 0; }

.ocai-filter {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-bottom: 20px; justify-content: center;
}
.ocai-chip {
	border: 1px solid #e2e8f0; background: #fff; color: #475569;
	padding: 7px 14px; border-radius: 999px; font-size: 13px; cursor: pointer;
	transition: .15s;
}
.ocai-chip:hover { border-color: #38bdf8; }
.ocai-chip.is-active { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }

.ocai-tools {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.ocai-role {
	display: inline-block; font-size: 11px; font-weight: 600;
	padding: 2px 8px; border-radius: 6px; margin-right: 6px; vertical-align: middle;
}
.ocai-role-teacher { background: #e0f2fe; color: #0369a1; }
.ocai-role-parent { background: #fef3c7; color: #b45309; }
.ocai-role-school { background: #ede9fe; color: #6d28d9; }
.ocai-role-student { background: #dcfce7; color: #15803d; }
.ocai-card {
	background: #fff;
	border-radius: 18px;
	padding: 22px;
	border: 1px solid #eef2f7;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
	transition: .2s;
}
.ocai-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
.ocai-card-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.ocai-icon { font-size: 26px; line-height: 1; }
.ocai-card-title { font-weight: 600; font-size: 16px; }
.ocai-card-desc { color: #94a3b8; font-size: 13px; margin-top: 2px; }

.ocai-field { margin-bottom: 12px; }
.ocai-label { display: block; font-size: 13px; color: #475569; margin-bottom: 6px; }
.ocai-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-size: 14px;
	box-sizing: border-box;
	background: #f8fafc;
	transition: .15s;
}
.ocai-input:focus { outline: none; border-color: #38bdf8; background: #fff; }
.ocai-error { border-color: #f87171; }

.ocai-button {
	width: 100%;
	min-height: 46px;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	background: linear-gradient(135deg, #0ea5e9, #14b8a6);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	margin-top: 4px;
	transition: .15s;
}
.ocai-button:hover { opacity: .92; }
.ocai-button:disabled { opacity: .6; cursor: default; }
.ocai-button.ghost {
	width: auto; min-height: 38px; padding: 0 18px; margin-right: 10px;
	background: #e2e8f0; color: #334155;
}

.ocai-result {
	margin-top: 24px; padding: 22px; background: #f8fafc;
	border-radius: 16px; border: 1px solid #eef2f7;
}
.ocai-result-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ocai-usage { font-size: 12px; color: #94a3b8; }
.ocai-result-body { line-height: 1.8; white-space: pre-wrap; font-size: 15px; }
.ocai-result-actions { margin-top: 14px; }

.ocai-loading { color: #94a3b8; }
.ocai-error-msg { color: #dc2626; }
.ocai-tip { text-align: center; color: #94a3b8; font-size: 12px; margin-top: 24px; }

.ocai-toast {
	position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
	background: #1f2937; color: #fff; padding: 10px 18px; border-radius: 20px;
	font-size: 14px; z-index: 999; opacity: .95;
}

.ocai-share-box { margin-top: 14px; }
.ocai-share-row {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px;
	padding: 10px 14px; font-size: 14px;
}
.ocai-share-row code {
	background: #e0f2fe; color: #0369a1; padding: 4px 10px; border-radius: 8px;
	font-size: 15px; letter-spacing: 1px; font-weight: 600;
}
.ocai-share-hint { color: #64748b; font-size: 12px; }

.ocai-feedback-box {
	margin-top: 14px; background: #fef9f3; border: 1px solid #fed7aa; border-radius: 14px;
	padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.ocai-fb-title { font-size: 13px; color: #9a3412; font-weight: 600; }
.ocai-fb-actions { display: flex; gap: 10px; }
.ocai-fb-actions .ocai-button { flex: 0 0 auto; }

/* 学情看板「学生档案」模式提示条 */
.ocai-archive-preview {
	margin: 10px 0 4px; padding: 9px 12px; font-size: 13px; color: #15803d;
	background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
}

@media (max-width: 768px) {
	.ocai-tools { grid-template-columns: 1fr; }
	.ocai-app { margin: 10px auto; padding: 14px; }
}