* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; font-family:"Microsoft YaHei","PingFang SC",sans-serif; font-size:12px; color:#333; overflow:hidden; }
.hidden { display:none !important; }
button { font-family:inherit; }
.flex1 { flex:1; }

/* ===== 登录 ===== */
.login-view { height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#e8eefb 0%,#f6f8fc 60%); }
.login-card { width:340px; background:#fff; border-radius:10px; box-shadow:0 8px 30px rgba(40,70,140,.12); padding:36px 32px; }
.login-title { font-size:22px; font-weight:bold; color:#2b3a5c; text-align:center; }
.login-sub { text-align:center; color:#98a4bb; margin:6px 0 24px; }
.login-field { display:flex; align-items:center; margin-bottom:14px; }
.login-field label { width:52px; color:#666; }
.login-field input { flex:1; border:1px solid #ddd; border-radius:4px; padding:8px 10px; font-size:13px; }
.login-field input:focus { outline:none; border-color:#3a7afe; }
.login-err { color:#e0342b; margin-top:10px; min-height:16px; text-align:center; }

/* ===== 标题栏 ===== */
#viewApp { display:flex; flex-direction:column; height:100%; }
.titlebar { height:40px; background:#fff; border-bottom:1px solid #e8e8e8; display:flex; align-items:center; justify-content:space-between; padding:0 16px; flex-shrink:0; }
.titlebar .title { font-size:15px; font-weight:bold; color:#222; }
.user-wrap { position:relative; }
.user-wrap > span { cursor:pointer; color:#555; }
.user-menu { position:absolute; right:0; top:26px; background:#fff; border:1px solid #e5e5e5; border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.1); z-index:50; min-width:110px; overflow:hidden; }
.um-item { padding:8px 16px; cursor:pointer; }
.um-item:hover { background:#eef4ff; color:#3a7afe; }

/* ===== 菜单栏 ===== */
.menubar { height:34px; background:#fff; border-bottom:1px solid #e8e8e8; display:flex; align-items:stretch; padding:0 8px; flex-shrink:0; }
.menubar .mi { display:flex; align-items:center; padding:0 14px; cursor:pointer; color:#444; position:relative; }
.menubar .mi:hover { color:#3a7afe; }
.menubar .mi.active { color:#3a7afe; font-weight:bold; }
.menubar .mi.active::after { content:""; position:absolute; left:12px; right:12px; bottom:0; height:2px; background:#3a7afe; border-radius:2px; }
.menubar .mi.dots { color:#999; }
.menubar .user-wrap { display:flex; align-items:center; margin-left:14px; }

/* ===== 工具栏 ===== */
.toolbar { background:#fff; border-bottom:1px solid #e8e8e8; display:flex; align-items:stretch; padding:2px 10px 0; flex-shrink:0; }
.tgroup { display:flex; flex-direction:column; align-items:center; padding:2px 6px 0; margin-right:8px; }
.tgroup .btns { display:flex; }
.tbtn { width:52px; height:48px; border:none; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; border-radius:6px; color:#444; }
.tbtn svg { width:20px; height:20px; stroke:#555; fill:none; stroke-width:1.6; }
.tbtn span { font-size:11px; }
.tbtn:hover { background:#eef4ff; color:#3a7afe; }
.tbtn:hover svg { stroke:#3a7afe; }
.tbtn.active { background:#e6f0ff; color:#3a7afe; }
.tbtn.active svg { stroke:#3a7afe; }
.tgroup .glabel { font-size:11px; color:#999; padding:3px 0 5px; }

/* ===== 信息条 ===== */
.infobar { background:#fff; border-bottom:1px solid #e8e8e8; padding:6px 16px; display:flex; align-items:center; gap:10px; color:#666; flex-shrink:0; }
.infobar .tag { background:#f2f3f5; border-radius:3px; padding:3px 8px; }
.infobar .note b { color:#3a7afe; font-weight:normal; }
.name-input { width:160px; border:1px solid #ddd; border-radius:3px; padding:4px 8px; font-size:12px; }
.name-input:focus { outline:none; border-color:#3a7afe; }
.btn-mini { border:1px solid #3a7afe; color:#3a7afe; background:#fff; border-radius:3px; padding:4px 12px; cursor:pointer; }
.btn-mini:hover { background:#eef4ff; }
.btn-mini.primary { background:#3a7afe; color:#fff; }
.btn-mini.primary:hover { background:#2f6ae8; }
.btn-mini.danger { border-color:#e0342b; color:#e0342b; }
.btn-mini.danger:hover { background:#fdeeee; }
.vsep { width:1px; height:18px; background:#e0e3e8; margin:0 4px; }

/* ===== 窗型页签 ===== */
.shapetabs { background:#fff; border-bottom:1px solid #e8e8e8; display:flex; align-items:flex-end; padding:4px 12px 0; gap:4px; flex-shrink:0; min-height:32px; }
.shape-tab { padding:5px 12px; border:1px solid #e2e5ea; border-bottom:none; border-radius:6px 6px 0 0; cursor:pointer; background:#f5f6f8; color:#666; user-select:none; }
.shape-tab:hover { background:#eef4ff; color:#3a7afe; }
.shape-tab.active { background:#e6f0ff; color:#3a7afe; border-color:#bcd4ff; font-weight:bold; }
.shape-tab .x { margin-left:7px; color:#aaa; font-size:11px; padding:0 2px; }
.shape-tab .x:hover { color:#e0342b; }
.stotal { margin-left:14px; color:#98a4bb; font-size:11px; padding-bottom:6px; }

/* ===== 主体 ===== */
.main { flex:1; display:flex; min-height:0; }
.canvas-wrap { flex:1; position:relative; background:#f4f5f7; overflow:hidden; }
#stage { position:absolute; inset:0; width:100%; height:100%; display:block; }
.zoombar { position:absolute; left:10px; bottom:8px; color:#888; font-size:11px; user-select:none; }
.hintbar { position:absolute; left:10px; top:8px; color:#8a94a8; font-size:11px; background:rgba(255,255,255,.85); padding:2px 8px; border-radius:10px; pointer-events:none; max-width:80%; }

/* ===== 侧栏 ===== */
.sidebar { width:238px; background:#fff; border-left:1px solid #e8e8e8; display:flex; flex-direction:column; overflow-y:auto; flex-shrink:0; }
.stabs { display:flex; border-bottom:1px solid #eee; flex-shrink:0; }
.stab { flex:1; text-align:center; padding:9px 0; cursor:pointer; color:#666; position:relative; }
.stab.active { color:#3a7afe; font-weight:bold; }
.stab.active::after { content:""; position:absolute; left:22%; right:22%; bottom:0; height:2px; background:#3a7afe; }
.spanel { padding:12px 14px; display:none; }
.spanel.active { display:block; }
.row { margin-bottom:9px; line-height:1.6; }
.row .lb { color:#999; font-size:11px; }
.row .val { color:#333; word-break:break-all; }
.big { font-size:16px; font-weight:bold; color:#222; }
.field { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.field label { color:#888; width:28px; }
.field input { width:90px; border:1px solid #ddd; border-radius:3px; padding:4px 6px; font-size:12px; }
.field input:focus { outline:none; border-color:#3a7afe; }
.btn-blue { display:block; width:100%; background:#3a7afe; color:#fff; border:none; border-radius:4px; padding:7px 0; cursor:pointer; font-size:12px; }
.btn-blue:hover { background:#2f6ae8; }
.btn-blue.gray { background:#8a94a8; }
.muted { color:#aaa; }
.linkish { color:#3a7afe; cursor:pointer; }

/* ---- 系统设置（四标签：显示/文本标注/开启扇/标注尺寸） ---- */
.set-wrap { display: flex; gap: 12px; min-height: 196px; }
.set-tabs { width: 92px; flex-shrink: 0; border-right: 1px solid #eee; padding-right: 8px; }
.set-tab { padding: 7px 10px; border-radius: 4px; cursor: pointer; color: #555; font-size: 13px; margin-bottom: 3px; }
.set-tab:hover { background: #eef4ff; color: #3a7afe; }
.set-tab.active { background: #e6f0ff; color: #3a7afe; font-weight: bold; }
.set-panes { flex: 1; min-width: 0; }
.set-note { font-size: 12px; color: #8a94a8; line-height: 1.6; margin-bottom: 12px; }
.set-pane .field label { width: 92px; color: #666; white-space: nowrap; }
.set-pane .field select { width: 150px; border: 1px solid #ddd; border-radius: 3px; padding: 4px 6px; font-size: 12px; }

/* ---- 尺寸标注改值：中间分格的方向选项（左移/右移、上移/下移） ---- */
.dimmove { display: flex; gap: 4px; margin-top: 5px; }
.dimmove button { flex: 1; padding: 3px 0; font-size: 12px; border: 1px solid #d7dee6; background: #fff; color: #555; border-radius: 3px; cursor: pointer; }
.dimmove button.on { border-color: #3a7afe; background: #e6f0ff; color: #3a7afe; font-weight: bold; }

/* 材料表 */
.mat-table { width:100%; border-collapse:collapse; margin-bottom:8px; }
.mat-table th, .mat-table td { border:1px solid #e5e8ee; padding:3px 4px; font-size:11px; }
.mat-table th { background:#f5f7fa; color:#666; font-weight:normal; }
.mat-table input { width:100%; border:none; font-size:11px; background:transparent; }
.mat-table input:focus { outline:1px solid #3a7afe; }
.mat-actions { display:flex; gap:6px; }

/* 照片 */
.pic-grid { display:flex; flex-wrap:wrap; gap:8px; }
.pic-item { width:88px; position:relative; }
.pic-item img { width:88px; height:66px; object-fit:cover; border-radius:4px; border:1px solid #e5e5e5; cursor:pointer; }
.pic-item .pic-name { font-size:10px; color:#888; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.pic-item .pic-del { position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%; background:#e0342b; color:#fff; border:none; cursor:pointer; font-size:10px; line-height:16px; text-align:center; }

/* ===== 状态栏 ===== */
.statusbar { height:28px; background:#fff; border-top:1px solid #e8e8e8; display:flex; align-items:center; padding:0 16px; color:#999; font-size:11px; gap:18px; flex-shrink:0; }

/* ===== 弹窗 ===== */
.modal-mask { position:fixed; inset:0; background:rgba(20,25,35,.4); z-index:100; display:flex; align-items:center; justify-content:center; }
.modal { background:#fff; border-radius:8px; width:640px; max-width:92vw; max-height:86vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.2); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid #eee; }
.modal-head .t { font-size:14px; font-weight:bold; }
.modal-close { border:none; background:none; font-size:16px; cursor:pointer; color:#999; }
.modal-body { padding:14px 18px; overflow-y:auto; }
.modal-foot { padding:10px 18px; border-top:1px solid #eee; display:flex; justify-content:flex-end; gap:8px; }

/* 表格（方案列表 / 用户管理） */
.dtable { width:100%; border-collapse:collapse; }
.dtable th, .dtable td { border-bottom:1px solid #eef0f4; padding:7px 8px; text-align:left; font-size:12px; }
.dtable th { background:#f5f7fa; color:#666; font-weight:normal; }
.dtable tr:hover td { background:#f7faff; }
.dtable .act { color:#3a7afe; cursor:pointer; margin-right:8px; }
.dtable .act.danger { color:#e0342b; }
.form-grid { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.form-grid .fg { display:flex; align-items:center; gap:6px; }
.form-grid label { color:#888; }
.form-grid input, .form-grid select { border:1px solid #ddd; border-radius:3px; padding:5px 8px; font-size:12px; }
.form-grid input:focus { outline:none; border-color:#3a7afe; }

#toast { position:fixed; left:50%; top:120px; transform:translateX(-50%); background:rgba(30,35,45,.85); color:#fff; padding:8px 18px; border-radius:6px; font-size:12px; display:none; z-index:200; pointer-events:none; }

/* ---- 开启扇类型库画廊（右侧「当前」面板，选中开启扇分格时显示） ---- */
.sash-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: 420px; overflow-y: auto; padding: 2px; }
.sash-item { border: 1.5px solid #d7dee6; border-radius: 6px; padding: 4px 2px 3px; text-align: center; cursor: pointer; background: #fff; transition: border-color .12s, box-shadow .12s; }
.sash-item:hover { border-color: #3a7afe; box-shadow: 0 1px 6px rgba(58,122,254,.18); }
.sash-item.cur { border-color: #3a7afe; background: #eef4ff; box-shadow: 0 0 0 1px #3a7afe inset; }
.sash-item span { display: block; font-size: 11px; color: #33475b; margin-top: 2px; line-height: 1.25; }

/* ================= 方案分享 ================= */
.sharebar { padding: 6px 14px; background: #eef4ff; border-bottom: 1px solid #cfe0ff; color: #33475b; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.sharebar .sharetip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sharebar .sharetip b { color: #1f3a68; }
.sharefit-btn { margin-left: auto; flex-shrink: 0; border: 1px solid #9db9f0; background: #fff; color: #3a7afe; border-radius: 4px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.sharefit-btn:active { background: #eef4ff; }
.share3d-btn { position: absolute; z-index: 30; pointer-events: auto; padding: 4px 12px; border: 1px solid #3a7afe; border-radius: 4px; background: #3a7afe; color: #fff; font-size: 13px; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.18); touch-action: manipulation; }
.share3d-btn:hover { background: #2b66e0; }
.share3d-btn.locked { border-color: #9aa7b5; background: #fff; color: #8a94a8; }
.share3d-btn.locked:hover { background: #f0f2f5; }

/* ---- 分享页手机适配：画布手势交给 JS（单指拖动/双指缩放），页签可横向滑动 ---- */
body.share-mode #cwrap { touch-action: none; }
body.share-mode .shapetabs { overflow-x: auto; padding: 4px 8px 0; }
body.share-mode .shape-tab { padding: 7px 14px; font-size: 13px; }
@media (max-width: 640px) {
  .sharebar { padding: 8px 10px; font-size: 13px; }
  .sharefit-btn { padding: 6px 14px; font-size: 13px; }
  .modal { max-height: 92vh; }
}

/* ---- 玻璃隔条弹窗（ui/muntin-modal.js）---- */
.mun-cat { font-size: 13px; font-weight: 700; color: #33475b; margin: 12px 0 2px; padding-bottom: 4px; border-bottom: 1px solid #e3e8ee; }
.mun-grp { font-size: 11.5px; color: #6b7c8c; margin: 9px 0 4px; }
.mun-gal { grid-template-columns: repeat(4, 1fr); max-height: none; }
.mun-gal .sash-item { padding: 5px 2px 4px; }
.mun-gal .sash-item svg { display: block; margin: 0 auto; }
.mun-bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3e8ee; font-size: 12px; flex-wrap: wrap; }
.mun-bar .chk { display: flex; align-items: center; gap: 5px; cursor: pointer; font-weight: 600; color: #33475b; }

/* ---- 注册（登录卡内切换）与强制下线提醒 ---- */
.login-links { margin-top: 10px; text-align: center; }
.login-links a { color: #3a7afe; font-size: 12.5px; cursor: pointer; }
.sms-row input { flex: 1; }
.sms-row { display: flex; align-items: center; gap: 6px; }
.sms-row label { width: auto; }
.kick-box { width: 420px; max-width: 92vw; }
.kick-msg { font-size: 14px; line-height: 1.9; color: #333; padding: 6px 2px; }
.kick-msg b { color: #e5484d; }

/* ---- 升级会员弹窗（ui/upgrade-modal.js）---- */
.up-tip { background: #fff7e8; border: 1px solid #ffe1ad; color: #8a5a00; border-radius: 6px; padding: 9px 12px; font-size: 13px; margin-bottom: 12px; }
.up-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.up-table th, .up-table td { border: 1px solid #e3e8ee; padding: 7px 8px; text-align: center; }
.up-table th { background: #f4f7fa; color: #33475b; }
.up-table td:first-child { text-align: left; color: #33475b; white-space: nowrap; }
.up-table .hl { background: #eef4ff; }
.up-table b { color: #e5484d; }
.up-foot { margin-top: 12px; font-size: 13px; line-height: 1.8; text-align: center; }