@charset "utf-8";
/* =========================================================================
   易泰城法术奇门 · 统一主题层
   加载顺序：必须放在 ui-media.css / ui-base.css / ui-apple.css / iqm5.css 之后
   说明：仅覆盖视觉样式，不改动任何排盘逻辑；保留 AppCan 宿主下的原有行为。
   ========================================================================= */

/* ---------- 1. 基础 ---------- */
html {
	-webkit-text-size-adjust: 100%;
}

body,
body.ui-mobile-viewport {
	background: #f0ece3;
	color: #2a2f3a;
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-tap-highlight-color: rgba(180, 53, 47, .12);
}

a {
	color: #a02a22;
}

/* 页面主体居中（手机端无影响，平板/桌面浏览器打开时更美观）
   注意：ui-base 把 .ui-page 设为 position:absolute; left:0; width:100%，
   必须同时给出 right:0，否则自动外边距不生效（会被解析成左对齐）。 */
.ui-mobile .ui-page,
.ui-page {
	left: 0;
	right: 0;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

#page_0,
#page_1,
#page_2 {
	margin-top: 0 !important;
}

/* 深色容器统一改浅色底 */
.ui-body-a,
.ui-body-b,
.ui-body-c,
.ui-body-d,
.ui-body-e {
	background: transparent;
	background-image: none;
	border: 0;
	color: #2a2f3a;
	text-shadow: none;
}

/* ---------- 2. 顶部标题栏 ---------- */
#header.ui-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	max-width: 640px;
	margin: 0 auto;
	height: 48px;
	padding: 0;
	overflow: visible;
	border: 0;
	border-bottom: 2px solid #c8a45c;
	background: #1f2430;
	background-image: linear-gradient(#2c3342, #1f2430);
	box-shadow: 0 2px 8px rgba(20, 24, 33, .28);
}

#header .ui-title {
	height: 48px;
	line-height: 48px;
	margin: 0 86px;
	padding: 0;
	font-size: 17px;
	font-weight: 600;
	color: #f7f3e8;
	letter-spacing: .05em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#header .ui-btn {
	position: absolute;
	top: 9px;
	box-sizing: border-box;
	min-height: 0;
	height: 30px;
	line-height: 18px;
	padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 8px;
	background: rgba(255, 255, 255, .1);
	background-image: none;
	box-shadow: none;
	color: #f2eee4;
	font-size: 13px;
	font-weight: 500;
	text-shadow: none;
	overflow: hidden;
}

#header .ui-btn:active {
	background: rgba(255, 255, 255, .22);
}

/* 旧版 Apple 风格按钮（万年历/记录页）统一为简洁胶囊 */
#header .ui-btn-apple-al,
#header .ui-btn-apple-ar,
#header .ui-btn-apple-ac,
#header .ui-btn-apple-nl,
#header .ui-btn-apple-nr,
#header .ui-btn-apple-nc {
	padding: 0 !important;
	background-image: none !important;
}

#header .ui-btn-iphone {
	padding: 5px 12px !important;
}

#header .ui-btn .ui-btn-text {
	font-size: 13px;
	line-height: 18px;
}

#header .ui-btn-left {
	/* stylelint-disable-next-line */
	left: 10px;
}

#header .ui-btn-right {
	right: 10px;
}

#header .ui-btn .ui-btn-inner {
	display: block;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

#header .ui-btn .ui-icon {
	display: none;
}

/* ---------- 3. 底部导航栏 ---------- */
#footer.ui-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 60;
	max-width: 640px;
	margin: 0 auto;
	height: 60px;
	border: 0;
	border-top: 1px solid rgba(200, 164, 92, .55);
	background: #1a1f28;
	background-image: linear-gradient(#252b37, #1a1f28);
	box-shadow: 0 -2px 10px rgba(20, 24, 33, .25);
	overflow: visible;
}

#footer .ui-navbar {
	border: 0;
	background: none;
	background-image: none;
}

#footer .ui-grid-d {
	display: -webkit-flex;
	display: flex;
	height: 60px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer .ui-grid-d > li {
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	float: none;
	width: auto;
	position: relative;
}

#footer .ui-nav-iphone .ui-btn {
	display: block;
	margin: 4px 3px !important;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: none;
	background-image: none;
	box-shadow: none;
	color: #c9cfdb;
	text-shadow: none;
	font-weight: 500;
}

#footer .ui-nav-iphone .ui-btn .ui-btn-inner {
	padding-top: 32px !important;
	padding-bottom: 6px !important;
	padding-left: 2px !important;
	padding-right: 2px !important;
}

#footer .ui-nav-iphone .ui-btn .ui-icon {
	width: 22px !important;
	height: 22px !important;
	margin-left: -11px !important;
	margin-top: 5px !important;
	background-size: 100% 100% !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

#footer .ui-nav-iphone .ui-btn-text {
	font-size: 12px;
	line-height: 1.2;
}

#footer .ui-nav-iphone input[type="radio"]:checked + label {
	background: rgba(200, 164, 92, .18) !important;
	background-image: none !important;
	border-radius: 10px;
}

#footer .ui-nav-iphone input[type="radio"]:checked + label .ui-btn-text {
	color: #f0d9a8;
}

/* ---------- 4. 内容容器 ---------- */
.ui-content,
.ui-page > div.ui-fixed-top:not(.ui-content) {
	border: 0;
	background: transparent;
	padding-left: 12px;
	padding-right: 12px;
}

.ui-fixed-top {
	padding-top: 60px;
}

.ui-fixed-bottom {
	padding-bottom: 76px;
}

/* 卡片 */
.ui-li-static,
.qm-card {
	display: block;
	list-style: none;
	box-sizing: border-box;
	margin: 0 0 12px;
	padding: 14px;
	border: 1px solid #e5dece;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(31, 36, 48, .07);
}

.ui-page > br {
	display: none;
}

/* ---------- 5. 按钮（内容区） ---------- */
#page_0 .ui-btn,
#page_1 .ui-btn,
#page_2 .ui-btn {
	display: block;
	box-sizing: border-box;
	min-height: 46px;
	padding: 13px 14px;
	border: 0;
	border-radius: 10px;
	background-image: none;
	box-shadow: 0 1px 2px rgba(31, 36, 48, .12);
	color: #2a2f3a;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-shadow: none;
	cursor: pointer;
}

#page_0 .ui-btn .ui-btn-inner,
#page_1 .ui-btn .ui-btn-inner,
#page_2 .ui-btn .ui-btn-inner {
	display: block;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	border-radius: 0 !important;
}

#page_0 .ui-btn .ui-icon,
#page_1 .ui-btn .ui-icon,
#page_2 .ui-btn .ui-icon {
	display: none;
}

#page_0 .ui-btn .style3,
#page_1 .ui-btn .style3,
#page_2 .ui-btn .style3 {
	font-size: 16px;
}

/* 主操作：朱砂红 */
#page_0 .ui-btn-b,
#page_1 .ui-btn-b,
#page_2 .ui-btn-b {
	background-color: #b4352f;
	background-image: linear-gradient(#c14a3e, #a02a22);
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

#page_0 .ui-btn-b:active,
#page_1 .ui-btn-b:active,
#page_2 .ui-btn-b:active {
	background-image: linear-gradient(#a02a22, #8a221b);
}

/* 次操作：白底描边 */
#page_0 .ui-btn-a,
#page_1 .ui-btn-a,
#page_2 .ui-btn-a {
	border: 1px solid #d5cdba;
	background-color: #fff;
	background-image: none;
	color: #2a2f3a;
}

#page_0 .ui-btn-a:active,
#page_1 .ui-btn-a:active,
#page_2 .ui-btn-a:active {
	background-color: #f6f2ea;
}

/* 危险操作：红字白底 */
#page_0 .ui-btn-c,
#page_1 .ui-btn-c,
#page_2 .ui-btn-c {
	border: 1px solid #e0b4b0;
	background-color: #fff;
	background-image: none;
	color: #b4352f;
}

#page_0 .ui-btn-c:active,
#page_1 .ui-btn-c:active,
#page_2 .ui-btn-c:active {
	background-color: #fdf3f2;
}

/* 分段选择组（今年/明年/后年 等）：横向排列，仅选中项高亮 */
#page_0 .ui-controlgroup,
#page_1 .ui-controlgroup,
#page_2 .ui-controlgroup {
	display: block;
	margin: 0;
	padding: 0;
}

#page_0 .ui-controlgroup .ui-btn,
#page_1 .ui-controlgroup .ui-btn,
#page_2 .ui-controlgroup .ui-btn {
	display: inline-block;
	min-height: 0;
	margin: 0;
	padding: 9px 14px;
	border: 1px solid #d5cdba;
	border-radius: 8px;
	background-color: #fff;
	background-image: none;
	box-shadow: none;
	color: #2a2f3a;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
}

#page_0 .ui-controlgroup .ui-btn + .ui-btn,
#page_1 .ui-controlgroup .ui-btn + .ui-btn,
#page_2 .ui-controlgroup .ui-btn + .ui-btn {
	margin-left: 6px;
}

/* 原样式把这类按钮限死在 4em，导致文字被截断（今年/明年/后年） */
#page_0 .ui-controlgroup .ui-label-staticwidth,
#page_1 .ui-controlgroup .ui-label-staticwidth,
#page_2 .ui-controlgroup .ui-label-staticwidth {
	width: auto;
	max-width: none;
	min-width: 4.2em;
	overflow: visible;
	text-overflow: clip;
}

#page_0 .ui-controlgroup input[type="radio"]:checked + label,
#page_1 .ui-controlgroup input[type="radio"]:checked + label,
#page_2 .ui-controlgroup input[type="radio"]:checked + label {
	border-color: #a02a22;
	background-color: #b4352f;
	background-image: linear-gradient(#c14a3e, #a02a22);
	color: #fff;
}

/* ---------- 6. 表单控件 ---------- */
select {
	box-sizing: border-box;
	height: 42px;
	padding: 0 8px;
	border: 1px solid #d5cdba;
	border-radius: 8px;
	background-color: #fff;
	color: #2a2f3a;
	font-family: inherit;
	font-size: 16px;
	vertical-align: middle;
	box-shadow: inset 0 1px 2px rgba(31, 36, 48, .04);
}

select:focus {
	outline: none;
	border-color: #b4352f;
	box-shadow: 0 0 0 2px rgba(180, 53, 47, .15);
}

select option {
	font-size: 16px;
}

input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="tel"],
textarea {
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1px solid #d5cdba;
	border-radius: 8px;
	background-color: #fff !important;
	color: #2a2f3a;
	font-family: inherit;
	font-size: 16px;
	box-shadow: inset 0 1px 2px rgba(31, 36, 48, .04);
}

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus {
	outline: none;
	border-color: #b4352f;
	box-shadow: 0 0 0 2px rgba(180, 53, 47, .15);
}

input::placeholder,
textarea::placeholder {
	color: #a9a294;
}

input[type="checkbox"],
input[type="radio"] {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	accent-color: #b4352f;
}

/* 勾选类：胶囊按钮 */
.qm-chips {
	margin: 2px 0 6px;
}

.qm-chips label,
label.qm-chip {
	display: inline-block;
	margin: 4px 8px 4px 0;
	padding: 7px 13px;
	border: 1px solid #d5cdba;
	border-radius: 999px;
	background: #fdfcf9;
	color: #2a2f3a;
	font-size: 15px;
	line-height: 1.3;
}

.qm-chips label input[type="checkbox"],
.qm-chips label input[type="radio"],
label.qm-chip input {
	margin: 0 5px 0 0;
}

.qm-chips label:active,
label.qm-chip:active {
	background: #f4efe4;
}

/* 暂不可用的勾选项（如缺少引擎文件的六甲盘） */
.qm-chip-disabled,
.qm-chip-disabled:active {
	opacity: .55;
	background: #f4f2ec;
	color: #8d94a0;
	cursor: not-allowed;
}

.qm-chip-disabled input {
	cursor: not-allowed;
}

/* 表单栅格与字段 */
.qm-grid {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0 -5px;
}

.qm-field {
	box-sizing: border-box;
	/* 基准宽度 112px：屏幕越宽一行容纳的字段越多（320px 上两列，414px 上三列，平板四~五列） */
	-webkit-flex: 1 1 112px;
	flex: 1 1 112px;
	min-width: 104px;
	padding: 0 5px 10px;
}

.qm-field > label {
	display: block;
	margin-bottom: 4px;
	color: #77808d;
	font-size: 13px;
}

.qm-field > select,
.qm-field > input {
	width: 100% !important;
	margin: 0;
}

/* 三列容器（时间选择等短字段）：字段本身已是流式宽度，此处仅缩小最小宽度
   以便窄屏也能排下三列 */
.qm-grid-3 .qm-field {
	min-width: 88px;
}

.qm-card-title {
	margin: 0 0 12px;
	padding-left: 9px;
	border-left: 3px solid #c8a45c;
	color: #8a6b2f;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.qm-sub {
	margin: 2px 0 10px;
	color: #77808d;
	font-size: 13px;
}

.qm-actions {
	display: -webkit-flex;
	display: flex;
	margin: 0 -4px 10px;
}

.qm-actions > * {
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	min-width: 0;
	margin: 0 4px !important;
}

.qm-actions:last-child {
	margin-bottom: 0;
}

/* 赞助图 */
#TABLEINPUT {
	margin: 12px 0 0;
	text-align: center;
	overflow: hidden;
}

#TABLEINPUT img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 10px;
}

/* 大屏上限制赞助图宽度（min() 不支持时保留上面的 100%） */
#TABLEINPUT img {
	max-width: min(100%, 460px);
}

/* ---------- 7. 文字样式 ---------- */
.style2 {
	color: #b4352f;
	font-family: inherit;
	font-size: 15px;
	text-align: center;
	line-height: 1.7;
	text-shadow: none;
}

.style3 {
	font-family: inherit;
	font-size: 16px;
	text-shadow: none;
}

.style4 {
	font-family: inherit;
	font-size: 13px;
	color: #77808d;
	text-align: center;
	text-shadow: none;
}

.style5 {
	color: #a8322d;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-shadow: none;
}

.headst {
	color: #2a2f3a;
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
}

.headset {
	color: #2a2f3a;
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
}

/* 保存页类型标题（原为白色 <font>，浅色底上强制跟随文字色） */
#PANTYPE font {
	color: inherit;
}

/* ---------- 8. 排盘结果 ---------- */
#outboard,
#outboard1,
#SAVEPAN,
#SAVEYIXING {
	box-sizing: border-box;
	margin: 0 0 12px;
	padding: 10px;
	border: 1px solid #e5dece;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(31, 36, 48, .07);
	color: #2a2f3a;
	text-shadow: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#outboard table,
#outboard1 table,
#SAVEPAN table,
#SAVEYIXING table {
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
}

#outboard hr,
#outboard1 hr,
#SAVEPAN hr,
#SAVEYIXING hr {
	height: 0;
	margin: 10px 0;
	border: 0;
	border-top: 1px dashed #e0d8c6;
}

.gridst {
	font-size: 13px;
	line-height: 1.5;
}

.gridst td {
	padding: 3px 4px;
}

.gridst td[onclick],
.gridst td:active {
	-webkit-tap-highlight-color: rgba(180, 53, 47, .16);
}

/* ---------- 9. 可折叠区域 ---------- */
.ui-collapsible-contain {
	margin: 0 0 12px;
}

.ui-collapsible-heading {
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 13px;
	border: 1px solid #e5dece;
	border-radius: 12px;
	background: #fff !important;
	background-image: none !important;
	box-shadow: 0 1px 3px rgba(31, 36, 48, .07);
	color: #8a6b2f;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-shadow: none;
}

.ui-collapsible-heading .ui-btn-inner {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.ui-collapsible-content,
.ui-collapsible-content2 {
	padding-top: 10px;
}

/* ---------- 10. 记录列表弹层（savepan.html） ---------- */
#keLiContainer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: none;
	padding: 0;
	margin: 0;
	border: 0;
	background: rgba(20, 24, 33, .45);
	overflow: hidden;
}

#keLiContainer .panel {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	box-sizing: border-box;
	width: 92%;
	max-width: 520px;
	max-height: 76vh;
	margin: 11vh auto 0;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
}

#keLiContainer .title {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	padding: 13px 16px;
	background: #1f2430;
	background-image: linear-gradient(#2c3342, #1f2430);
	color: #f7f3e8;
	font-size: 15px;
	font-weight: 600;
}

#keLiContainer .title .close {
	padding: 3px 10px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 8px;
	color: #f2eee4;
	font-size: 13px;
	font-weight: 400;
	text-decoration: none;
}

#keLiContainer .list {
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px 0;
}

#keLiContainer .item {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	padding: 11px 14px;
	border-bottom: 1px solid #f0ece3;
}

#keLiContainer .item .info {
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
}

#keLiContainer .item .name {
	color: #2a2f3a;
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#keLiContainer .item .topic {
	margin-top: 2px;
	color: #8d94a0;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#keLiContainer .item .open,
#keLiContainer .item .del {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	margin-left: 8px;
	padding: 5px 12px;
	border: 1px solid #d5cdba;
	border-radius: 8px;
	background: #fdfcf9;
	color: #2a2f3a;
	font-size: 13px;
	text-decoration: none;
}

#keLiContainer .item .del {
	border-color: #e0b4b0;
	color: #b4352f;
}

#keLiContainer .empty {
	padding: 34px 16px;
	color: #8d94a0;
	font-size: 14px;
	line-height: 1.9;
	text-align: center;
}

#keLiContainer .empty .sub {
	color: #aab0ba;
	font-size: 12px;
}

/* ---------- 11. 通用组件 ---------- */
.qm-toast {
	position: fixed;
	left: 50%;
	bottom: 86px;
	z-index: 10000;
	max-width: 82%;
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba(31, 36, 48, .93);
	color: #f6f2e8;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-transition: opacity .25s ease;
	transition: opacity .25s ease;
}

.qm-toast.qm-show {
	opacity: 1;
}

.qm-totop {
	position: fixed;
	right: 14px;
	bottom: 80px;
	z-index: 9000;
	display: none;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(200, 164, 92, .5);
	border-radius: 50%;
	background: rgba(31, 36, 48, .84);
	color: #f6f2e8;
	font-size: 18px;
	line-height: 38px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

/* ---------- 12. 万年历（chd.html）局部优化 ---------- */
.todayColor,
.tablegirdsel {
	background-color: #f7e3c0 !important;
}

/* 日历等表格在卡片内居中 */
#page_0 .ui-bar-d table {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- 12.1 宅盘罗盘 ---------- */
#myCanvas {
	max-width: 100%;
	height: auto;
}

.qm-compass {
	padding: 10px 0 6px;
}

/* =======================================================================
   自适应布局
   - 手机竖屏：满宽 + 两/三列字段
   - 平板 / 桌面：居中加宽列（720 → 880px），字段自动增列，图表同步放大
   - 手机横屏：压缩顶栏/底栏高度，字段改为多列
   - 刘海屏 / 圆角屏：预留安全区域
   ======================================================================= */

/* 图片与画布不撑破容器；图表表格保持原尺寸、由容器横向滚动 */
img,
canvas,
video {
	max-width: 100%;
	height: auto;
}

/* ---------- 安全区域（仅支持 env() 的环境生效） ---------- */
@supports (padding-top: env(safe-area-inset-top)) {
	#header.ui-header {
		height: calc(48px + env(safe-area-inset-top));
		padding-top: env(safe-area-inset-top);
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}

	#header .ui-btn {
		top: calc(9px + env(safe-area-inset-top));
	}

	#footer.ui-footer {
		height: calc(60px + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}

	#footer .ui-grid-d {
		height: calc(60px + env(safe-area-inset-bottom));
	}

	.ui-fixed-top {
		padding-top: calc(60px + env(safe-area-inset-top));
	}

	.ui-fixed-bottom {
		padding-bottom: calc(76px + env(safe-area-inset-bottom));
	}

	.ui-content,
	.ui-page > div.ui-fixed-top:not(.ui-content) {
		padding-left: calc(12px + env(safe-area-inset-left));
		padding-right: calc(12px + env(safe-area-inset-right));
	}

	.qm-toast {
		bottom: calc(86px + env(safe-area-inset-bottom));
	}

	.qm-totop {
		bottom: calc(80px + env(safe-area-inset-bottom));
	}
}

/* ---------- 小屏手机（≤360px）：收紧标题与内边距 ---------- */
@media all and (max-width: 360px) {
	#header .ui-title {
		font-size: 15px;
		margin: 0 74px;
	}

	.ui-content {
		padding-left: 10px;
		padding-right: 10px;
	}

	.qm-card {
		padding: 12px;
	}

	.qm-field {
		min-width: 96px;
		padding: 0 4px 9px;
	}

	.gridst {
		font-size: 12px;
	}
}

/* 极窄屏（≤300px）：单列兜底 */
@media all and (max-width: 300px) {
	.qm-field {
		-webkit-flex-basis: 100%;
		flex-basis: 100%;
	}
}

/* ---------- 平板 / 小桌面（≥600px） ---------- */
@media all and (min-width: 600px) {
	.ui-mobile .ui-page,
	.ui-page,
	#header.ui-header,
	#footer.ui-footer {
		max-width: 720px;
	}

	.ui-content,
	.ui-page > div.ui-fixed-top:not(.ui-content) {
		padding-left: 16px;
		padding-right: 16px;
	}

	.qm-card,
	.ui-li-static {
		padding: 16px;
	}

	#outboard,
	#outboard1,
	#SAVEPAN,
	#SAVEYIXING {
		padding: 14px;
	}

	/* 九宫盘与文字随屏幕变大 */
	.gridst {
		font-size: 14px;
	}

	.gridst td {
		padding: 4px 6px;
	}

	#outboard .caltabwidthst {
		width: 84px;
	}

	/* 底栏导航与按钮行居中收窄，避免大屏上被拉散 */
	#footer .ui-navbar {
		max-width: 620px;
		margin-left: auto;
		margin-right: auto;
	}

	.qm-actions {
		max-width: 620px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------- 大屏（≥900px）：进一步加宽并放大图表 ---------- */
@media all and (min-width: 900px) {
	body,
	body.ui-mobile-viewport {
		background: #e7e2d7;
	}

	.ui-mobile .ui-page,
	.ui-page,
	#header.ui-header,
	#footer.ui-footer {
		max-width: 880px;
		box-shadow: 0 0 0 1px rgba(31, 36, 48, .05), 0 2px 12px rgba(31, 36, 48, .06);
	}

	.ui-content,
	.ui-page > div.ui-fixed-top:not(.ui-content) {
		padding-left: 20px;
		padding-right: 20px;
	}

	.qm-card,
	.ui-li-static {
		padding: 18px;
	}

	#outboard,
	#outboard1,
	#SAVEPAN,
	#SAVEYIXING {
		padding: 16px;
	}

	.gridst {
		font-size: 15px;
	}

	.gridst td {
		padding: 5px 7px;
	}

	/* 九宫盘在大屏同步放大 */
	#outboard .caltabwidthst {
		width: 92px;
	}

	/* 按钮不随大屏无限拉长 */
	.qm-actions {
		max-width: 620px;
		margin-left: auto;
		margin-right: auto;
	}

	.qm-actions:last-child {
		margin-bottom: 0;
	}
}

/* ---------- 手机横屏（高度受限）：压缩顶栏/底栏并增列 ---------- */
@media all and (orientation: landscape) and (max-height: 540px) {
	#header.ui-header {
		height: 44px;
	}

	#header .ui-title {
		height: 44px;
		line-height: 44px;
		font-size: 15px;
		margin: 0 78px;
	}

	#header .ui-btn {
		top: 7px;
		height: 28px;
		padding: 4px 10px;
	}

	#footer.ui-footer,
	#footer .ui-grid-d {
		height: 54px;
	}

	#footer .ui-nav-iphone .ui-btn .ui-btn-inner {
		padding-top: 26px !important;
		padding-bottom: 4px !important;
	}

	#footer .ui-nav-iphone .ui-btn .ui-icon {
		width: 20px !important;
		height: 20px !important;
		margin-left: -10px !important;
		margin-top: 3px !important;
	}

	#footer .ui-nav-iphone .ui-btn .ui-btn-text {
		font-size: 11px;
	}

	.ui-fixed-top {
		padding-top: 52px;
	}

	.ui-fixed-bottom {
		padding-bottom: 66px;
	}

	.qm-card,
	.ui-li-static {
		padding: 12px;
	}

	.qm-card-title {
		margin-bottom: 8px;
	}

	.qm-field {
		min-width: 92px;
		padding: 0 4px 8px;
	}

	.qm-totop {
		bottom: 66px;
	}

	.qm-toast {
		bottom: 70px;
	}
}

/* ---------- 自适应：横屏平板 / 桌面且高度充足时，图表区更宽松 ---------- */
@media all and (min-width: 900px) and (min-height: 700px) {
	#outboard {
		padding: 20px;
	}
}