/* 设计稿共用组件。尺寸和状态以 ui.md「组件细节」为准，页面里不要再单独定义按钮、输入框、下拉框。 */

/* 按钮：高度只有 28（小）/ 32（默认）/ 40（手机大按钮）三档 */
.btn,.iconbtn{box-sizing:border-box;height:32px;padding:0 12px;border:1px solid #CBD0D8;border-radius:6px;background:#FFFFFF;color:#12161D;font:inherit;font-size:13px;font-weight:500;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .12s,border-color .12s}
.iconbtn{width:32px;padding:0;color:#3D4552}
.btn:hover,.iconbtn:hover,.btn.is-hover{background:#F8FAFC;border-color:#9AA4B2}
.btn:active,.iconbtn:active,.btn.is-active{background:#EEF0F3}
.btn.primary{border-color:#1D4ED8;background:#1D4ED8;color:#FFFFFF;font-weight:600}
.btn.primary:hover,.btn.primary.is-hover{background:#1E40AF;border-color:#1E40AF}
.btn.primary:active,.btn.primary.is-active{background:#1E3A8A;border-color:#1E3A8A}
.btn.danger{color:#B91C1C}
.btn.danger:hover,.btn.danger.is-hover{background:#FEF2F2;border-color:#FCA5A5}
.btn.danger-solid{border-color:#B91C1C;background:#B91C1C;color:#FFFFFF;font-weight:600}
.btn.ghost{border-color:transparent;background:transparent;color:#1D4ED8;padding:0 8px}
.btn.ghost:hover,.btn.ghost.is-hover{background:#EEF2FF;border-color:transparent}
.btn.sm{height:28px;font-size:12px;padding:0 10px}.iconbtn.sm{width:28px;height:28px}
.btn.lg{height:40px;font-size:14px;padding:0 16px}
.btn.block{width:100%}
.btn:focus-visible,.iconbtn:focus-visible,.btn.is-focus{outline:2px solid #1D4ED8;outline-offset:2px}
.btn:disabled,.btn[aria-disabled="true"],.iconbtn:disabled{background:#F1F5F9;border-color:#E2E5EA;color:#9AA4B2;cursor:not-allowed;pointer-events:none}
.btn .spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn .spin{animation:none}}

/* 输入框与下拉框：高 32，圆角 6；聚焦蓝框，出错红框 */
.input,select{box-sizing:border-box;height:32px;border:1px solid #CBD0D8;border-radius:6px;padding:0 8px;font:inherit;font-size:13px;color:#12161D;background-color:#FFFFFF;min-width:0}
select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:28px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E6673' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 9px center!important;cursor:pointer}
.input:hover,select:hover{border-color:#9AA4B2}
input:focus-visible,select:focus-visible,textarea:focus-visible,.is-focus-field{outline:none;border-color:#1D4ED8!important;box-shadow:0 0 0 3px rgba(29,78,216,.15)}
.is-error{border-color:#B91C1C!important}
.is-error:focus-visible{box-shadow:0 0 0 3px rgba(185,28,28,.15)}
input:disabled,select:disabled{background-color:#F1F5F9;color:#9AA4B2;cursor:not-allowed}
input[readonly]{background-color:#F8FAFC}
input[type="checkbox"],input[type="radio"]{accent-color:#1D4ED8;width:16px;height:16px;margin:0;flex:none}

/* 下拉菜单（操作菜单 / 下拉框展开后的列表） */
.menu{box-sizing:border-box;min-width:180px;padding:4px;border:1px solid #E2E5EA;border-radius:8px;background:#FFFFFF;box-shadow:0 10px 30px rgba(18,22,29,.14);font-size:13px}
.menu .mi{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:4px;color:#12161D;cursor:pointer}
.menu .mi:hover,.menu .mi.is-hover{background:#F1F5F9}
.menu .mi[aria-selected="true"]{color:#1D4ED8;font-weight:600}
.menu .mi[aria-disabled="true"]{color:#9AA4B2;cursor:not-allowed}
.menu .mi.danger{color:#B91C1C}
.menu .mi .kbd{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:#9AA4B2}
.menu .mi .ck{margin-left:auto}
.menu .sep{height:1px;margin:4px 0;background:#EEF0F3}
.menu .grp{padding:6px 8px 2px;font-size:11px;font-weight:600;letter-spacing:.06em;color:#5E6673}
[hidden]{display:none!important}
.dlg .sub{font-size:12px;color:#5E6673}
dialog{border:0;border-radius:10px;padding:0;width:min(640px,calc(100vw - 32px));box-shadow:0 20px 60px rgba(18,22,29,.25);color:#12161D;font-family:"IBM Plex Sans","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;font-size:13px}
dialog::backdrop{background:rgba(18,22,29,.4)}
.dh{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #E2E5EA}
.dh h2{margin:0;font-size:16px;font-weight:600}
.db{padding:18px 20px;display:flex;flex-direction:column;gap:14px;max-height:70vh;overflow:auto}
.df{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid #E2E5EA;background:#FAFBFC}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dlg .field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#5E6673}
.dlg .field input,.dlg .field select,.dlg .field textarea{height:32px;border:1px solid #CBD0D8;border-radius:6px;padding:0 8px;font:inherit;font-size:13px;color:#12161D;background:#FFFFFF;min-width:0}
.dlg .field textarea{height:64px;padding:6px 8px;resize:vertical}
.unit{display:flex;align-items:center;gap:4px}.unit input{flex:1;width:100%}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:#12161D}
.note{padding:10px 12px;border-radius:6px;background:#F8FAFC;color:#3D4552;font-size:12px;line-height:1.7}
.warn{padding:10px 12px;border-radius:6px;background:#FFFBEB;color:#92400E;font-size:12px;line-height:1.7}
.seg{display:inline-flex;padding:2px;background:#F1F5F9;border-radius:6px}
.seg label{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:4px;cursor:pointer;color:#3D4552}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:focus-visible){outline:2px solid #1D4ED8;outline-offset:1px}
.seg label:has(input:checked){background:#FFFFFF;box-shadow:0 1px 2px rgba(18,22,29,.12);color:#12161D;font-weight:600}
.iconx{width:32px;height:32px;border:0;background:transparent;border-radius:6px;cursor:pointer;color:#5E6673;display:inline-flex;align-items:center;justify-content:center}
.pick{border:1px solid #E2E5EA;border-radius:6px}
.pick label{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EEF0F3;cursor:pointer}
.pick label:last-child{border-bottom:0}
.pick label:has(input:checked){background:#F8FAFF;box-shadow:inset 3px 0 0 #1D4ED8}
.pick .muted{color:#9AA4B2}
.dtable{width:100%;border-collapse:collapse;font-size:12px}
.dtable th{font-weight:600;color:#5E6673;text-align:left;padding:8px 10px;border-bottom:1px solid #E2E5EA;background:#FAFBFC;white-space:nowrap}
.dtable td{padding:10px;border-bottom:1px solid #EEF0F3;vertical-align:top}

/* 提示：次要说明收进 ? 图标，悬停或键盘聚焦时显示。.end / .start 控制气泡朝哪边展开。 */
.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:4px;padding:0;border:1px solid #CBD0D8;border-radius:50%;background:#FFFFFF;color:#5E6673;font:600 10px/1 "IBM Plex Sans",sans-serif;letter-spacing:0;text-transform:none;vertical-align:-3px;cursor:help;flex:none}
.tip:hover,.tip:focus-visible{border-color:#1D4ED8;color:#1D4ED8;outline:none}
.tip::after{content:attr(data-tip);position:absolute;z-index:30;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;max-width:240px;padding:8px 10px;border-radius:6px;background:#12161D;color:#F3F4F6;font:400 12px/1.6 "IBM Plex Sans","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;white-space:normal;text-align:left;box-shadow:0 6px 20px rgba(18,22,29,.25);opacity:0;pointer-events:none;transition:opacity .12s}
.tip.end::after{left:auto;right:-6px;transform:none}
.tip.start::after{left:-6px;transform:none}
.tip:hover::after,.tip:focus-visible::after{opacity:1}
@media (prefers-reduced-motion:reduce){.tip::after{transition:none}}

/* 折叠区：默认只显示摘要，点开看全部。 */
details.fold>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"";width:6px;height:6px;margin-left:8px;border-right:1.5px solid #5E6673;border-bottom:1.5px solid #5E6673;transform:translateY(-2px) rotate(45deg);transition:transform .15s;flex:none}
details.fold[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
details.fold>summary:focus-visible{outline:2px solid #1D4ED8;outline-offset:2px;border-radius:4px}
.meta{font-size:12px;color:#5E6673}
.letter-s{width:20px;height:20px;border-radius:4px;color:#FFFFFF;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:none}
.pick .muted-row{cursor:default;color:#9AA4B2}
.pick .muted-row .mono{color:#5E6673}