/* ============================================================ style.css 目录（按出现顺序，同名段合并计数） 01 risk .risk-* 02 工作区布局 .workspace-* 03 侧边栏 .sidebar-* 04 hamburger .hamburger-* 05 导航菜单 .navigation-* 06 management .management-* 07 main .main-* 08 content .content-* 09 dashboard .dashboard-* 10 community .community-* 11 is .is-* 12 school .school-* 13 dashboard .dashboard-* 14 数据导出中心 .delivery-* 15 数据更新计划 .update-* 16 plan .plan-* 17 角色权限 .role-* 18 permission .permission-* 19 治理任务 .governance-* 20 坐标与地图纠错 .coordinate-* 21 系统设置 .settings-* 22 feedback .feedback-* 23 分类卡片 .category-* 24 品牌数据 .brand-* 25 门店数据 .store-* 26 history .history-* 27 品牌质量档案 .bq-* 28 商场数据 .mall-* ============================================================ */ /* ============================================================ 主题变量：通过 data-theme 切换布局主题 ============================================================ */ :root{ --field-font:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI","Microsoft YaHei",sans-serif; --field-size:13px; --field-label-size:12px; --record-name-color:#1670d8; --record-name-hover-color:#0956b3; --record-name-hover-bg:rgba(22,112,216,.07); --record-name-weight:600; --bg: #faf9f6; --panel: #ffffff; --border: #e8e4dc; --border-strong: #d8d3c8; --text: #1a1a18; --text-2: #6b655a; --text-3: #a8a296; --accent: #1f6f54; --accent-strong: #175a45; --accent-soft: #edf4f0; --accent-contrast: #ffffff; --amber: #8a6d3b; --amber-soft: #f5f1e8; --danger: #c6452e; --danger-soft: #f9ece8; --ok: #1f6f54; --hover: #f3f1ec; --row-line: #f0ede6; --input-bg: #faf9f6; --btn-bg: #ffffff; --btn-hover: #f6f4ee; --modal-bg: #ffffff; --thead-bg: #faf9f6; --thead-text: #6b655a; --mask-bg: rgba(26, 26, 24, 0.32); --toast-bg: #1a1a18; --toast-text: #faf9f6; --radius: 10px; --radius-sm: 7px; } .login-screen{ position: fixed; inset: 0; z-index: 3000; display: none; place-items: center; background: #f5f5f6; } .login-screen.show{ display: grid; }.auth-locked{ overflow: hidden; } .login-shell{ display: grid; grid-template-columns: minmax(560px, 1fr) minmax(430px, .83fr); width: min(1400px, calc(100% - 120px)); min-height: min(760px, calc(100vh - 110px)); overflow: hidden; background: #fff; box-shadow: 0 18px 50px rgba(52,75,111,.08); } .login-visual{ position: relative; overflow: hidden; background: #f3f7ff; }.login-visual-brand .logo{ width: 28px; height: 28px; } .login-scene{ position: absolute; inset: 16% 5% 16%; transform: perspective(700px) rotateX(4deg); }.scene-platform{ position: absolute; border: 1px solid rgba(105,172,255,.22); background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(211,226,251,.78)); box-shadow: 0 18px 35px rgba(89,143,221,.12); }.platform-main{ left: 28%; top: 26%; width: 45%; height: 39%; transform: skewY(-8deg); }.scene-screen{ position: absolute; left: 15%; top: 12%; width: 70%; height: 68%; border: 2px solid #b9d7ff; border-radius: 4px; background: linear-gradient(145deg,#f9fcff,#dceaff); box-shadow: 0 10px 20px rgba(75,139,235,.16); }.scene-screen span{ position: absolute; left: 12%; top: 13%; width: 48%; height: 45%; border-radius: 4px; background: linear-gradient(140deg,#d2f8ff,#2074ed); clip-path: polygon(0 84%,25% 48%,43% 65%,68% 20%,100% 50%,100% 100%,0 100%); }.scene-screen i{ position: absolute; right: 12%; width: 25%; height: 7%; border-radius: 4px; background: #72c8ff; }.scene-screen i:nth-of-type(1){ top: 18%; }.scene-screen i:nth-of-type(2){ top: 35%; width: 20%; }.scene-screen i:nth-of-type(3){ top: 52%; width: 27%; }.scene-screen b{ position: absolute; left: 12%; bottom: 14%; width: 74%; height: 10%; border-radius: 4px; background: repeating-linear-gradient(90deg,#6eb2ff 0 4px,transparent 4px 8px); }.scene-keyboard{ position: absolute; left: 8%; bottom: -16%; width: 84%; height: 23%; border-radius: 4px; background: repeating-linear-gradient(90deg,rgba(58,138,243,.65) 0 5px,rgba(177,217,255,.55) 5px 8px); transform: skewX(-30deg); } .login-image-scene{ inset: 0; transform: none; } .login-image-scene img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .login-css-scene{ display: none; } /* 原图保持静止；所有蒙版均复用原 PNG 对应区域的像素，不绘制新元素。 */ .login-original-motion{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .login-original-motion > img{ position: absolute; inset: 0; opacity: 0; will-change: opacity,filter; } .login-original-motion .original-bar{ filter: brightness(1.3) saturate(1.14); animation: original-bar-refresh 5.8s ease-in-out infinite; } .original-bar-1{ clip-path: polygon(34.5% 49.0%,38.5% 47.3%,38.5% 55.3%,34.5% 56.3%); animation-delay: 0s !important; } .original-bar-2{ clip-path: polygon(36.4% 46.4%,40.4% 44.3%,40.4% 54.5%,36.4% 55.4%); animation-delay: .18s !important; } .original-bar-3{ clip-path: polygon(38.3% 42.8%,42.2% 40.6%,42.2% 53.5%,38.3% 54.6%); animation-delay: .36s !important; } .original-bar-4{ clip-path: polygon(40.2% 40.3%,44.1% 38.2%,44.1% 52.5%,40.2% 53.7%); animation-delay: .54s !important; } .original-bar-5{ clip-path: polygon(42.0% 37.8%,46.0% 35.8%,46.0% 51.2%,42.0% 52.7%); animation-delay: .72s !important; } .original-bar-6{ clip-path: polygon(43.8% 34.8%,47.8% 32.8%,47.8% 49.6%,43.8% 51.5%); animation-delay: .9s !important; } .login-original-motion .original-motion{ filter: brightness(1.34) saturate(1.18); animation: original-element-refresh 4.6s ease-in-out infinite; } .original-wall-chart{ clip-path: polygon(50.4% 38.2%,55.8% 36.6%,56.3% 43.7%,50.5% 44.8%); animation-delay: -.3s !important; } .original-pie{ clip-path: polygon(45.7% 49.2%,54.7% 48.3%,56.2% 53.5%,53.8% 55.0%,46.5% 54.2%); animation-delay: -1.7s !important; } .original-curve{ clip-path: polygon(58.6% 38.7%,59.7% 39.5%,60.8% 38.9%,62.0% 40.5%,63.3% 39.0%,64.4% 41.5%,65.7% 42.1%,65.8% 39.0%,58.6% 37.9%); animation-delay: -2.8s !important; } .original-screen-list{ clip-path: polygon(56.8% 42.8%,68.2% 43.2%,68.2% 51.8%,56.8% 50.7%); animation-delay: -3.9s !important; } .original-data-cubes{ clip-path: polygon(55.8% 50.5%,66.1% 51.5%,66.0% 56.6%,55.8% 55.2%); animation-delay: -1.1s !important; } .original-check{ clip-path: polygon(24.0% 57.0%,31.6% 56.7%,32.4% 64.5%,25.0% 65.5%); animation-delay: -2.2s !important; } .original-floating-cubes{ clip-path: polygon(13.4% 35.3%,20.8% 35.5%,20.8% 43.8%,13.4% 43.6%); animation-delay: -3.4s !important; } .original-folder{ clip-path: polygon(74.2% 20.0%,81.8% 20.1%,82.0% 28.2%,74.3% 28.2%); animation-delay: -4.2s !important; } .login-original-motion .original-server-left, .login-original-motion .original-server-top, .login-original-motion .original-server-bottom, .login-original-motion .original-server-right{ filter: brightness(1.65) saturate(1.45); animation: original-led-refresh 2.4s ease-in-out infinite; } .original-server-left{ clip-path: polygon(12.4% 46.2%,18.2% 46.0%,18.3% 55.2%,12.3% 55.3%); animation-delay: -.2s !important; } .original-server-top{ clip-path: polygon(73.7% 28.8%,79.3% 28.7%,79.4% 36.2%,73.6% 36.3%); animation-delay: -.8s !important; } .original-server-bottom{ clip-path: polygon(24.5% 71.8%,30.4% 71.6%,30.5% 80.0%,24.4% 80.1%); animation-delay: -1.4s !important; } .original-server-right{ clip-path: polygon(76.8% 64.0%,82.7% 63.8%,82.8% 72.6%,76.7% 72.7%); animation-delay: -2s !important; } @keyframes original-bar-refresh { 0%,100% { opacity:.08; filter:brightness(1.08) saturate(1.02); } 28%,55% { opacity:.86; filter:brightness(1.34) saturate(1.18); } 76% { opacity:.2; filter:brightness(1.14) saturate(1.06); } } @keyframes original-element-refresh { 0%,100% { opacity:.08; filter:brightness(1.08) saturate(1.02); } 44% { opacity:.82; filter:brightness(1.38) saturate(1.2); } 70% { opacity:.26; filter:brightness(1.16) saturate(1.08); } } @keyframes original-led-refresh { 0%,100% { opacity:.05; filter:brightness(1.12) saturate(1.04); } 42%,60% { opacity:.92; filter:brightness(1.72) saturate(1.5); } } @media (prefers-reduced-motion: reduce) { .login-original-motion > img{ animation:none!important; opacity:0; } } .platform-left{ left: 8%; top: 49%; width: 19%; height: 24%; transform: skewY(-8deg); }.platform-right{ right: 5%; top: 28%; width: 19%; height: 21%; transform: skewY(-8deg); }.platform-left i, .platform-right i{ display: block; width: 60%; height: 10%; margin: 16% auto 0; border-radius: 4px; background: linear-gradient(90deg,#9ceaff,#6b9dff); }.scene-database, .scene-pin{ position: absolute; left: 33%; top: -27%; display: grid; width: 34%; height: 38%; place-items: center; border: 2px solid #87c9ff; border-radius: 50%; color: #29d9c1; background: #edfaff; }.scene-pin{ left: 38%; top: -35%; color: #1f75f0; font-size: 24px; }.scene-orbit{ position: absolute; left: 13%; top: 30%; width: 73%; height: 65%; border: 2px solid rgba(150,191,249,.25); border-radius: 50%; transform: rotate(-18deg); }.orbit-two{ left: 27%; top: 17%; width: 56%; height: 75%; transform: rotate(55deg); }.scene-cube{ position: absolute; width: 22px; height: 22px; border: 1px solid #7fd5ff; border-radius: 4px; background: linear-gradient(145deg,#dffaff,#78c0ff); transform: rotate(20deg); }.cube-one{ left: 18%; top: 26%; }.cube-two{ right: 18%; top: 61%; width: 15px; height: 15px; }.cube-three{ left: 26%; bottom: 15%; width: 14px; height: 14px; } .login-card{ align-self: center; justify-self: center; width: min(430px, calc(100% - 120px)); padding: 54px 50px; }.login-card-head .logo{ display: none; }.login-card-head h2{ margin: 0 0 42px; color: #202532; font-size: 39px; letter-spacing: -.07em; }.login-method{ display: flex; gap: 36px; margin-bottom: 28px; border-bottom: 1px solid #edf0f5; }.login-method button{ position: relative; border: 0; padding: 0 0 14px; background: transparent; color: #a4aab4; font: inherit; font-size: 14px; cursor: pointer; }.login-method button.active{ color: #2374ed; font-weight: 650; }.login-method button.active::after{ position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 4px; background: #2374ed; content: ''; }.login-card > label{ display: block; margin-top: 18px; color: #8c95a2; font-size: 11px; font-weight: 600; }.login-input-wrap{ position: relative; display: flex; align-items: center; height: 50px; margin-top: 7px; border: 1px solid #dce3ec; border-radius: 4px; background: #fff; }.login-input-wrap:focus-within{ border-color: #2374ed; box-shadow: 0 0 0 3px rgba(35,116,237,.08); }.login-input-wrap > span{ width: 42px; color: #b8c0cb; font-size: 13px; text-align: center; }.login-card input{ box-sizing: border-box; width: 100%; height: 100%; border: 0; outline: none; font: inherit; }.login-password button{ position: absolute; right: 12px; border: 0; background: none; color: #2374ed; font-size: 10px; cursor: pointer; }.login-password input{ padding-right: 48px; }.login-helper{ display:flex; align-items:center; justify-content:space-between; margin-top: 13px; color:#a3aab5; font-size:10px; }.login-helper button{ border:0; background:transparent; color:#2374ed; font:inherit; cursor:pointer; }.login-error{ min-height: 18px; margin-top: 9px; color: #d84848; font-size: 11px; }.login-submit{ width: 100%; height: 50px; margin-top: 39px; border: 0; border-radius: 4px; background: #176cf0; color: #fff; font: inherit; font-size: 14px; cursor: pointer; box-shadow: 0 7px 16px rgba(23,108,240,.18); }.login-submit:disabled{ opacity: .65; }.login-card > small{ display: block; margin-top: 20px; color: #b4bbc5; font-size: 10px; text-align: center; } .login-remember{ display: inline-flex; align-items: center; gap: 6px; color: #7d8999; font-size: 10px; font-weight: 500; cursor: pointer; } .login-remember input{ width: 15px !important; height: 15px !important; margin: 0; accent-color: #2374ed; cursor: pointer; } .user-menu-button{ display: grid; grid-template-columns: 28px auto; grid-template-rows: 1fr 1fr; column-gap: 7px; align-items: center; border: 0; padding: 3px 8px 3px 3px; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; text-align: left; }.user-menu-button > span{ grid-row: 1 / 3; display: grid; width: 28px; height: 28px; place-items: center; overflow:hidden; border-radius:50%; background: linear-gradient(145deg,var(--accent),#6fa4ff); color: #fff; font-size: 11px; font-weight:650; box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 22%,transparent); }.user-menu-button > span img{ width:100%; height:100%; object-fit:cover; }.user-menu-button b{ align-self: end; font-size: 10px; }.user-menu-button small{ align-self: start; color: var(--text-3); font-size: 9px; }.user-popover{ position: absolute; z-index: 30; right: 25px; top: 63px; width: 136px; padding: 5px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: 0 12px 30px rgba(24,48,78,.14); }.user-popover button{ width: 100%; border: 0; padding: 8px 10px; border-radius: 8px; background: none; color: var(--text-2); text-align: left; cursor: pointer; }.user-popover button:hover{ background: var(--hover); color: var(--accent); }.user-popover > i{ display:block; height:1px; margin:4px 5px; background:var(--row-line); } .settings-page{ padding: 2px 0 20px; }.settings-tabs{ display: flex; gap: 4px; width: fit-content; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); }.settings-tabs button{ border: 0; padding: 7px 16px; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer; }.settings-tabs button.active{ background: var(--panel); color: var(--accent); box-shadow: 0 1px 4px rgba(31,73,125,.1); }.settings-head{ display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }.settings-head h2{ margin: 0; font-size: 16px; }.settings-head p{ margin: 4px 0 0; color: var(--text-3); font-size: 10px; }.settings-table{ overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }.settings-table table{ width: 100%; border-collapse: collapse; }.settings-table th, .settings-table td{ padding: 11px 13px; border-bottom: 1px solid var(--row-line); font-size: 11px; text-align: left; }.settings-table th{ color: var(--text-3); font-size:var(--field-label-size); }.settings-role-tag{ display: inline-block; padding: 3px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 9px; }.status-dot{ color: var(--text-3); }.status-dot.active{ color: var(--ok); }.settings-user-mask{ position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: var(--mask-bg); }.settings-user-mask[hidden]{ display: none; }.settings-user-dialog{ width: 360px; padding: 22px; border-radius: 12px; background: var(--panel); box-shadow: 0 20px 60px rgba(0,0,0,.2); }.settings-user-dialog h3{ margin: 0 0 15px; }.settings-user-dialog label{ display: block; margin-top: 10px; color: var(--text-2); font-size: 10px; }.settings-user-dialog input, .settings-user-dialog select{ box-sizing: border-box; width: 100%; height: 36px; margin-top: 5px; border: 1px solid var(--border); border-radius: 8px; padding: 0 9px; background: var(--input-bg); color: var(--text); }.settings-user-dialog > div{ display: flex; justify-content: flex-end; gap: 7px; margin-top: 18px; } /* 用户权限页面：统一页签、工具栏与表格的内容边线 */ .settings-page{ padding: 0 0 24px; } .settings-tabs{ box-sizing: border-box; display: flex; gap: 28px; width: 100%; padding: 0 20px; border: 0; border-bottom: 1px solid var(--row-line); border-radius: 0; background: var(--panel); } .settings-tabs button{ position: relative; padding: 14px 2px 12px; border-radius: 0; color: var(--text-3); font-size: 12px; } .settings-tabs button.active{ background: transparent; color: var(--accent); box-shadow: none; font-weight: 650; } .settings-tabs button.active::after{ position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 4px; background: var(--accent); content: ''; } .settings-page > section{ padding: 0 20px 22px; } .settings-page > section[hidden]{ display: none; } .settings-head{ min-height: 62px; margin: 0; } .settings-head h2{ font-size: 14px; }.settings-head p{ margin-top: 3px; } .settings-table{ border-radius: 12px; box-shadow: 0 5px 16px rgba(35,68,116,.035); } .settings-table th, .settings-table td{ padding: 12px 14px; } @media(max-width:900px){.login-shell{display:block;width:min(450px,calc(100% - 32px));min-height:0}.login-visual{display:none}.login-card{width:auto;padding:42px 32px}.login-card-head .logo{display:block;margin-bottom:18px}.user-menu-button b, .user-menu-button small{display:none}.user-menu-button{grid-template-columns:28px;padding-right:3px}} /* 密码登录页：按参考图收敛为单一登录方式 */ /* ========== risk ========== */ .login-card-head h2{ margin-bottom: 66px; } .login-method{ gap: 0; } .login-method button{ color: #2374ed; cursor: default; } .login-helper{ justify-content: flex-end; } .login-helper span{ display: none; } .login-agreement{ display: flex !important; align-items: center; gap: 6px; margin-top: 22px !important; color: #aeb5bf !important; font-size: 11px !important; font-weight: 400 !important; white-space: nowrap; } .login-agreement input{ width: 17px !important; height: 17px !important; margin: 0 !important; padding: 0 !important; accent-color: #2374ed; } .login-agreement a{ color: #2374ed; text-decoration: none; } /* 登录表单质感升级：保持原有布局，仅重塑视觉层级 */ .login-card{ position: relative; border: 1px solid rgba(218,228,243,.78); border-radius: 20px; background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(249,251,255,.94)); box-shadow: 0 26px 70px rgba(38,78,135,.10), 0 2px 8px rgba(38,78,135,.04); } .login-card::before{ position: absolute; top: 0; left: 50px; width: 56px; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg,#1f72f2,#68a3ff); content: ''; } .login-card-head h2{ color: #172238; font-weight: 720; text-shadow: 0 1px 0 #fff; } .login-method{ border-bottom-color: #e8edf5; }.login-method button{ letter-spacing: .02em; } .login-card > label:not(.login-agreement){ color: #66748a; letter-spacing: .02em; } .login-input-wrap{ overflow: hidden; border-color: #dce5f1; border-radius: 8px; background: linear-gradient(180deg,#fff,#fbfcff); box-shadow: inset 0 1px 2px rgba(35,68,116,.025), 0 4px 12px rgba(35,68,116,.025); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .login-input-wrap:focus-within{ border-color: #72a5f4; background: #fff; box-shadow: 0 0 0 2px rgba(35,116,237,.075); } .login-input-wrap > span{ display: grid; align-self: stretch; flex: 0 0 46px; place-items: center; border-right: 1px solid #edf1f7; color: #8ea0b8; background: rgba(245,248,253,.75); } .login-input-wrap > span svg{ width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.login-input-wrap:focus-within > span{ color: #2374ed; background: #f3f7ff; } .login-card input{ padding: 0 14px; color: #263247; font-size: 12px; font-weight: 520; background: transparent; }.login-card input::placeholder{ color: #b3bdca; font-weight: 400; } .login-password button{ right: 10px; padding: 5px 8px; border-radius: 4px; color: #397fe9; background: #f2f6ff; transition: background .15s ease; }.login-password button:hover{ background: #e8f0ff; } .login-account-select{ position: relative; } .login-account-select .login-input-wrap{ padding-right: 42px; } .login-account-toggle{ position: absolute; right: 7px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 8px; color: #8293aa; background: transparent; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; } .login-account-toggle svg{ width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }.login-account-toggle:hover{ color: #357ce7; background: #f1f6ff; }.login-account-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); } .login-account-menu{ position: absolute; z-index: 12; top: calc(100% + 7px); right: 0; left: 0; overflow: hidden; border: 1px solid #dbe6f5; border-radius: 8px; background: rgba(255,255,255,.98); box-shadow: 0 14px 28px rgba(45,84,137,.16); backdrop-filter: blur(12px); } .login-account-menu-head{ display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 7px; color: #94a3b8; font-size: 10px; }.login-account-menu-head button{ border: 0; padding: 2px 0; background: transparent; color: #4a83df; font: inherit; cursor: pointer; } .login-account-item{ display: flex; align-items: stretch; border-top: 1px solid #f0f4f9; }.login-account-item > button:first-child{ flex: 1; min-width: 0; padding: 9px 12px; border: 0; background: transparent; color: #263247; text-align: left; cursor: pointer; }.login-account-item > button:first-child:hover{ background: #f2f7ff; }.login-account-item b, .login-account-item small{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.login-account-item b{ font-size: 12px; font-weight: 620; }.login-account-item small{ margin-top: 3px; color: #8d9bb0; font-size: 10px; }.login-account-remove{ width: 36px; border: 0; background: transparent; color: #a5b0c0; font-size: 18px; cursor: pointer; }.login-account-remove:hover{ color: #e45a5a; background: #fff4f4; }.login-account-empty{ padding: 13px 12px; color: #94a3b8; font-size: 11px; } .login-account-manual{ width: 100%; padding: 9px 12px; border: 0; border-top: 1px solid #f0f4f9; background: #fafcff; color: #4a83df; font-size: 11px; text-align: left; cursor: pointer; }.login-account-manual:hover{ background: #f2f7ff; } .login-helper button{ padding: 2px 0; color: #397fe9; font-weight: 520; }.login-helper button:hover{ color: #155fcf; } .login-submit{ border-radius: 8px; background: linear-gradient(135deg,#2779f3,#1464e4); box-shadow: 0 12px 24px rgba(28,103,225,.22); font-weight: 650; letter-spacing: .18em; transition: transform .15s ease, box-shadow .15s ease; }.login-submit:hover{ transform: translateY(-1px); box-shadow: 0 15px 28px rgba(28,103,225,.27); }.login-submit:active{ transform: translateY(0); } .login-agreement{ color: #9ba6b5 !important; }.login-agreement a{ font-weight: 520; }.login-agreement a:hover{ color: #155fcf; } /* 收紧表单纵向节奏，避免中段出现大块无效留白 */ .login-card{ padding-top: 44px; padding-bottom: 42px; } .login-card-head h2{ margin-bottom: 38px; } .login-method{ margin-bottom: 22px; } .login-card > label:not(.login-agreement){ margin-top: 14px; } .login-helper{ margin-top: 10px; } .login-error{ min-height: 14px; margin-top: 5px; } .login-submit{ margin-top: 18px; } .login-agreement{ margin-top: 16px !important; } /* 右侧登录区直接铺满网格列，移除插画与表单之间的二次留白 */ .login-card{ box-sizing: border-box; align-self: stretch; justify-self: stretch; width: auto; min-width: 0; padding: clamp(92px, 11vh, 128px) clamp(72px, 8vw, 118px) 70px; border: 0; border-radius: 0; background: linear-gradient(155deg,#fff 0%,#fbfdff 100%); box-shadow: none; } .login-card::before{ display: none; } /* 风险预警中心 */ .risk-dot{ width:7px; height:7px; border-radius:50%; }.risk-dot.p0{ background:#e45151; box-shadow:0 0 0 4px rgba(228,81,81,.1); }.risk-dot.p1{ background:#f09d32; box-shadow:0 0 0 4px rgba(240,157,50,.1); }.risk-dot.p2{ background:#5795ec; box-shadow:0 0 0 4px rgba(87,149,236,.1); }.risk-dot.overdue{ background:#7e6cdf; box-shadow:0 0 0 4px rgba(126,108,223,.1); }.risk-type-grid button.active{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }.risk-alert-item.is-overdue{ background:linear-gradient(90deg,rgba(228,81,81,.035),transparent 42%); }.risk-priority{ display:inline-grid; width:32px; height:21px; place-items:center; border-radius:8px; font-size:10px; font-weight:750; }.risk-priority.p0{ background:#fff0f0; color:#d94c4c; }.risk-priority.p1{ background:#fff6e8; color:#d98518; }.risk-priority.p2{ background:#edf5ff; color:#3b81df; }.risk-empty{ padding:55px 20px; color:var(--text-3); text-align:center; }.risk-empty span{ display:block; margin-bottom:8px; color:var(--ok); font-size:24px; }.risk-empty b, .risk-empty p{ display:block; margin:0; }.risk-empty b{ color:var(--text-2); font-size:13px; }.risk-empty p{ margin-top:5px; font-size:10px; } /* 登录区视觉收敛：降低标题攻击性，统一中文字体并让主操作成为唯一焦点 */ /* ========== 工作区布局 ========== */ .login-card{ padding: clamp(72px, 9vh, 104px) clamp(70px, 7.4vw, 106px) 58px; font-family: "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "阿里巴巴普惠体", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif; } .login-card-head h2{ margin-bottom: 32px; color: #1b2942; font-size: 34px; font-weight: 700; letter-spacing: -.045em; line-height: 1.2; text-shadow: none; } .login-method{ margin-bottom: 18px; }.login-method button{ padding-bottom: 11px; font-size: 13px; font-weight: 600; letter-spacing: 0; }.login-method button.active::after{ height: 2px; } .login-card > label:not(.login-agreement){ margin-top: 13px; color: #65758d; font-size: 12px; font-weight: 500; letter-spacing: 0; } .login-input-wrap{ height: 46px; margin-top: 6px; border-radius: 8px; box-shadow: none; }.login-input-wrap > span{ flex-basis: 44px; }.login-card input{ font-size: 14px; font-weight: 500; }.login-account-toggle{ font-size: 14px; } .login-password button{ display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border-radius: 8px; color: #8293aa; background: transparent; } .login-password button:hover{ color: #357ce7; background: #f1f6ff; } .login-password button svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .login-password .password-eye-closed{ display: none; }.login-password button.is-visible .password-eye-open{ display: none; }.login-password button.is-visible .password-eye-closed{ display: block; } .login-helper{ margin-top: 8px; }.login-helper button{ color: #5289df; font-size: 11px; font-weight: 500; } .login-error{ min-height: 12px; margin-top: 4px; } .login-submit{ height: 46px; margin-top: 14px; border-radius: 8px; background: #216fe8; box-shadow: 0 8px 18px rgba(33,111,232,.18); font-size: 14px; font-weight: 600; letter-spacing: .06em; }.login-submit:hover{ box-shadow: 0 10px 20px rgba(33,111,232,.22); } .login-agreement{ gap: 5px; margin-top: 13px !important; color: #9aa8ba !important; font-size: 11px !important; }.login-agreement input{ width: 16px !important; height: 16px !important; }.login-agreement a{ color: #3c7fe2; font-weight: 500; } [data-theme="a"]{ --bg: #f5f7fa; --panel: #ffffff; --border: #e4e7ec; --border-strong: #d0d5dd; --text: #1f2733; --text-2: #5b6472; --text-3: #98a1b0; --accent: #2f6bff; --accent-strong: #2558d9; --accent-soft: #eaf0ff; --accent-contrast: #ffffff; --amber: #b4710a; --amber-soft: #fff4e5; --danger: #e5484d; --danger-soft: #fdeaea; --ok: #1d9e75; --hover: #f3f6fc; --row-line: #f1f3f5; --input-bg: #f5f7fa; --btn-bg: #ffffff; --btn-hover: #f6f7f9; --modal-bg: #ffffff; --thead-bg: #fafbfc; --thead-text: #5b6472; --mask-bg: rgba(15, 23, 42, 0.4); --toast-bg: #1f2733; --toast-text: #ffffff; } [data-theme="b"]{ --bg: #0b1220; --panel: #0e1626; --border: #1f2a3d; --border-strong: #334155; --text: #e6edf7; --text-2: #8b98ad; --text-3: #64748b; --accent: #38bdf8; --accent-strong: #0ea5e9; --accent-soft: #0e2a3a; --accent-contrast: #0b1220; --amber: #f5c07a; --amber-soft: #3a2e1a; --danger: #f87171; --danger-soft: #3a1a1a; --ok: #34d399; --hover: #131f33; --row-line: #1f2a3d; --input-bg: #0b1220; --btn-bg: #111a2c; --btn-hover: #1a2538; --modal-bg: #111a2c; --thead-bg: #111a2c; --thead-text: #8b98ad; --mask-bg: rgba(0, 0, 0, 0.6); --toast-bg: #e6edf7; --toast-text: #0b1220; } [data-theme="d"]{ --bg: #f4f6fa; --panel: #ffffff; --border: #dce2ec; --border-strong: #c2cbd9; --text: #1a2733; --text-2: #5b6472; --text-3: #8a96a8; --accent: #1a365d; --accent-strong: #14294a; --accent-soft: #eaf0f8; --accent-contrast: #ffffff; --amber: #b8912a; --amber-soft: #f7f2e0; --danger: #c0392b; --danger-soft: #fbeae8; --ok: #1a7f5a; --hover: #f0f4fa; --row-line: #edf0f5; --input-bg: #ffffff; --btn-bg: #ffffff; --btn-hover: #eef2f8; --modal-bg: #ffffff; --thead-bg: #1a365d; --thead-text: #d5deea; --mask-bg: rgba(20, 34, 58, 0.4); --toast-bg: #1a365d; --toast-text: #ffffff; } /* 暖色仪表盘（Warm Dashboard）——暖灰画布 + 青绿主色 + 柔和悬浮卡片 */ [data-theme="f"]{ --bg: #faf8f5; --panel: #ffffff; --border: #eee9e2; --border-strong: #ded6cc; --text: #2f3437; --text-2: #6f7375; --text-3: #a1a1aa; --accent: #4a9d9a; --accent-strong: #3d8582; --accent-soft: rgba(74, 157, 154, 0.12); --accent-contrast: #ffffff; --amber: #c68e3e; --amber-soft: rgba(232, 184, 109, 0.18); --danger: #c17767; --danger-soft: rgba(193, 119, 103, 0.12); --ok: #4a9d9a; --hover: #faf8f5; --row-line: #f4f1ed; --input-bg: #fcfbf9; --btn-bg: #ffffff; --btn-hover: #f7f3ee; --modal-bg: #ffffff; --thead-bg: #fcfaf7; --thead-text: #8b8b91; --mask-bg: rgba(56, 50, 44, 0.32); --toast-bg: #363a3c; --toast-text: #ffffff; --radius: 16px; --radius-sm: 11px; } [data-theme="f"] body{ font-family: "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "阿里巴巴普惠体", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; } [data-theme="f"] .topbar{ height: 102px; padding: 0 40px; border-bottom-color: rgba(232, 225, 216, 0.72); box-shadow: 0 1px 3px rgba(47, 52, 55, 0.025); } [data-theme="f"] .logo{ width: 38px; height: 38px; border-radius: 0; background: url("logo.svg") center / contain no-repeat; box-shadow: none; } [data-theme="f"] .sidebar{ position: fixed; inset: 0 auto 0 0; width: 320px; margin: 0; border: 0; border-right: 1px solid #eee9e2; border-radius: 0; box-shadow: none; overflow: hidden; z-index: 20; } [data-theme="f"] .main{ min-height: 0; } [data-theme="f"] .panel{ border: 0; box-shadow: 0 18px 42px rgba(47, 52, 55, 0.065); } [data-theme="f"] .sidebar-brand{ display: flex; align-items: center; gap: 16px; height: 126px; padding: 0 32px; color: #2f3437; font-size: 22px; font-weight: 650; letter-spacing: -0.03em; } [data-theme="f"] .sidebar-brand .logo{ width: 48px; height: 48px; border-radius: 16px; } [data-theme="f"] .topbar .brand, [data-theme="f"] .topbar .meta{ display: none; } [data-theme="f"] .workspace-title{ display: flex; flex-direction: column; gap: 3px; margin-right: auto; } [data-theme="f"] .workspace-title strong{ font-size: 24px; line-height: 1.1; font-weight: 650; letter-spacing: -0.035em; } [data-theme="f"] .workspace-title span{ font-size: 13px; color: var(--text-3); } [data-theme="f"] .search-box{ padding: 14px 30px 22px; border-bottom: 0; } [data-theme="f"] .search-box input{ min-height: 44px; padding: 10px 14px; border-radius: 12px; } [data-theme="f"] .tree{ padding: 14px 30px; } [data-theme="f"] .tree-row{ padding: 13px 14px; border-radius: 16px; gap: 10px; } [data-theme="f"] .tree-row .node-icon{ font-size: 16px; } [data-theme="f"] .tree-children{ margin-left: 10px; } [data-theme="f"] .toolbar{ min-height: 44px; } [data-theme="f"] .toolbar-title{ font-size: 20px; font-weight: 650; letter-spacing: -0.025em; } [data-theme="f"] thead th{ padding-top: 14px; padding-bottom: 14px; } [data-theme="f"] tbody td{ padding-top: 13px; padding-bottom: 13px; } [data-theme="f"] .modal{ border: 0; border-radius: 16px; box-shadow: 0 24px 70px rgba(47, 52, 55, 0.17); } [data-theme="f"] .panel-empty{ padding: 80px 40px; } [data-theme="f"] input:focus, [data-theme="f"] select:focus, [data-theme="f"] textarea:focus{ box-shadow: 0 0 0 3px rgba(74, 157, 154, 0.14); } /* ========== 侧边栏 ========== */ .workspace-title{ display: none; } @media (max-width: 640px) { [data-theme="f"] .sidebar{ transform: translateX(-100%); transition: transform .2s ease; } [data-theme="f"] .sidebar.open{ transform: translateX(0); } [data-theme="f"] .topbar{ height: 64px; padding: 0 16px; } [data-theme="f"] .workspace-title strong{ font-size: 18px; } [data-theme="f"] .workspace-title span{ display: none; } [data-theme="f"] .topbar .hamburger{ display: block; } [data-theme="f"] .sidebar-backdrop.show{ display: block; } } /* 固定侧边栏布局（Fixed Sidebar）——zinc 中性色 + blue 强调，紧凑卡片，无玻璃态/渐变 */ [data-theme="e"]{ --bg: #fafafa; /* zinc-50 */ --panel: #ffffff; /* white */ --border: #e4e4e7; /* zinc-200 */ --border-strong: #d4d4d8; /* zinc-300 */ --text: #18181b; /* zinc-900 */ --text-2: #52525c; /* zinc-600（StyleKit 精确值） */ --text-3: #9f9fa9; /* zinc-400（StyleKit 精确值） */ --accent: #3080ff; /* blue-500（StyleKit 精确值） */ --accent-strong: #155dfc; /* blue-600（StyleKit 精确值） */ --accent-soft: #eff6ff; /* blue-50 */ --accent-contrast: #ffffff; --amber: #d97706; /* amber-600 */ --amber-soft: #fef3c7; /* amber-100 */ --danger: #ef4444; /* red-500 */ --danger-soft: #fef2f2; /* red-50 */ --ok: #10b981; /* emerald-500 */ --hover: #f4f4f5; /* zinc-100 */ --row-line: #f4f4f5; /* zinc-100 */ --input-bg: #f4f4f5; /* zinc-100 */ --btn-bg: #ffffff; --btn-hover: #f4f4f5; --modal-bg: #ffffff; --thead-bg: #fafafa; --thead-text: #52525b; --mask-bg: rgba(24, 24, 27, 0.4); --toast-bg: #18181b; --toast-text: #ffffff; --radius: 12px; /* rounded-xl：卡片 */ --radius-sm: 8px; /* rounded-lg：按钮/输入 */ } /* 固定侧边栏专属布局：深色固定侧边栏 w-64(256px)，内容区 ml-64 */ [data-theme="e"] .app{ padding-left: 256px; } [data-theme="e"] .sidebar{ position: fixed; top: 0; left: 0; bottom: 0; width: 256px; background: #18181b; color: #fafafa; border-right: 1px solid #3f3f46; z-index: 30; } [data-theme="e"] .topbar{ box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04); } [data-theme="e"] .panel{ box-shadow: 0 1px 3px rgba(24, 24, 27, 0.06); } [data-theme="e"] .tree-row{ border-radius: 8px; color: #e4e4e7; } [data-theme="e"] body{ font-family: "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "阿里巴巴普惠体", "Albert Sans", "Albert Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; } /* 侧边栏品牌区（仅固定侧边栏主题显示，替代顶栏 logo） */ /* ========== hamburger ========== */ .sidebar-brand{ display: none; } [data-theme="e"] .sidebar-brand{ display: flex; align-items: center; gap: 9px; height: 54px; padding: 0 16px; flex: none; border-bottom: 1px solid #3f3f46; font-size: 14px; font-weight: 600; color: #fafafa; letter-spacing: -0.01em; } [data-theme="e"] .topbar .brand{ display: none; } /* 深色侧边栏内部配色 */ [data-theme="e"] .search-box{ border-bottom: 1px solid #3f3f46; } [data-theme="e"] .search-box input{ background: #27272a; color: #fafafa; border-color: #3f3f46; } [data-theme="e"] .search-box input::placeholder{ color: #71717a; } [data-theme="e"] .tree-row:hover{ background: #27272a; } [data-theme="e"] .tree-row .caret, [data-theme="e"] .tree-row .node-icon, [data-theme="e"] .tree-row .node-count{ color: #71717a; } /* 激活项：深色底 + 左侧实心锚点线（solid anchor） */ [data-theme="e"] .tree-row.selected{ background: rgba(48, 128, 255, 0.18); color: #7cb1ff; box-shadow: inset 3px 0 0 #3080ff; } [data-theme="e"] .tree-row.selected .node-icon, [data-theme="e"] .tree-row.selected .node-count{ color: #7cb1ff; } [data-theme="e"] .toolbar-title, [data-theme="e"] .modal-head{ letter-spacing: -0.01em; } /* ---- 固定侧边栏：折叠/展开、移动端抽屉、交互反馈 ---- */ .sidebar-collapse{ display: none; } .hamburger{ display: none; } /* ========== 导航菜单 ========== */ .sidebar-backdrop{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 20; } [data-theme="e"] .sidebar-collapse{ display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; margin: 8px; flex: none; border: 1px solid #3f3f46; border-radius: 8px; background: transparent; color: #9f9fa9; cursor: pointer; font-size: 13px; font-family: inherit; transition: background-color .2s, color .2s; } [data-theme="e"] .sidebar-collapse:hover{ background: #27272a; color: #fafafa; } [data-theme="e"] .collapse-icon{ transition: transform .2s; } [data-theme="e"] .hamburger{ width: 34px; height: 34px; flex: none; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--btn-bg); color: var(--text); cursor: pointer; font-size: 16px; } /* 折叠态（桌面 ≥769px）：icon-only，侧边栏 w-16(64px)，内容 ml-16 */ @media (min-width: 769px){ [data-theme="e"] .app.sidebar-collapsed { padding-left: 64px; } [data-theme="e"] .app.sidebar-collapsed .sidebar { width: 64px; } [data-theme="e"] .app.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0 8px; } [data-theme="e"] .app.sidebar-collapsed .brand-text { display: none; } [data-theme="e"] .app.sidebar-collapsed .search-box { display: none; } [data-theme="e"] .app.sidebar-collapsed .tree { padding: 8px 6px; } [data-theme="e"] .app.sidebar-collapsed .tree-children { margin-left: 0; } [data-theme="e"] .app.sidebar-collapsed .tree-row { justify-content: center; padding: 9px 0; } [data-theme="e"] .app.sidebar-collapsed .tree-row .caret, [data-theme="e"] .app.sidebar-collapsed .tree-row .node-name, [data-theme="e"] .app.sidebar-collapsed .tree-row .node-count { display: none; } [data-theme="e"] .app.sidebar-collapsed .collapse-label { display: none; } [data-theme="e"] .app.sidebar-collapsed .collapse-icon { transform: rotate(180deg); } } [data-theme="e"] .tree-row{ transition: background-color .2s, color .2s; } [data-theme="e"] input:focus, [data-theme="e"] select:focus, [data-theme="e"] textarea:focus{ box-shadow: 0 0 0 3px rgba(48, 128, 255, 0.22); } /* 移动端（<768px）：侧边栏离屏抽屉 + 汉堡按钮 */ @media (max-width: 768px){ [data-theme="e"] .app { padding-left: 0; } [data-theme="e"] .sidebar { transform: translateX(-100%); transition: transform .2s ease; } [data-theme="e"] .sidebar.open { transform: translateX(0); } [data-theme="e"] .topbar .hamburger { display: block; } [data-theme="e"] .sidebar-backdrop.show { display: block; } } @media (prefers-reduced-motion: reduce) { [data-theme="e"] .sidebar{ transition: none; } [data-theme="e"] .collapse-icon{ transition: none; } } /* 暖色仪表盘紧凑桌面版：降低后台界面的空间占用，提升信息密度 */ [data-theme="f"] .topbar{ height: 74px; padding: 0 28px; } [data-theme="f"] .sidebar-brand{ height: 88px; padding: 0 22px; gap: 12px; font-size: 18px; } [data-theme="f"] .sidebar-brand .brand-text{ max-width: 142px; font-size: 14px; font-weight: 650; line-height: 1.35; } [data-theme="f"] .sidebar-brand .logo{ width: 48px; height: 48px; border-radius: 0; } [data-theme="f"] .search-box{ padding: 10px 18px 14px; } [data-theme="f"] .search-box input{ min-height: 38px; padding: 8px 11px; border-radius: 12px; } [data-theme="f"] .tree{ padding: 8px 16px; } [data-theme="f"] .tree-row{ padding: 8px 10px; border-radius: 12px; gap: 8px; } [data-theme="f"] .tree-row .node-count{ font-size: 11px; } [data-theme="f"] .tree-row .node-icon{ font-size: 14px; } [data-theme="f"] .tree-children{ margin-left: 8px; } [data-theme="f"] .workspace-title strong{ font-size: 20px; } [data-theme="f"] .workspace-title span{ font-size: 12px; } [data-theme="f"] .toolbar{ min-height: 38px; } [data-theme="f"] .toolbar-title{ font-size: 18px; } [data-theme="f"] .panel{ border-radius: 16px; box-shadow: 0 10px 28px rgba(47, 52, 55, 0.045); } [data-theme="f"] thead th{ padding: 10px 14px; } [data-theme="f"] tbody td{ padding: 9px 14px; } /* 固定侧边栏主题：更清晰的分组式侧边导航 */ [data-theme="f"] .tree{ padding: 7px 12px 10px; } [data-theme="f"] .tree-children{ margin-left: 0; padding-left: 9px; } [data-theme="f"] .nav-group-label{ margin: 12px 9px 5px; padding-top: 10px; border-top: 1px solid var(--row-line); color: var(--text-3); font-size: 10px; font-weight: 650; letter-spacing: .08em; } [data-theme="f"] .nav-group-label:first-child{ margin-top: 2px; padding-top: 0; border-top: 0; } [data-theme="f"] .nav-group-label{ display: flex; align-items: center; justify-content: space-between; gap: 8px; letter-spacing: 0; } /* ========== management ========== */ .navigation-manager-mask{ position: fixed; z-index: 190; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(20, 39, 68, .34); backdrop-filter: blur(3px); } .navigation-manager-drawer{ display: flex; flex-direction: column; width: min(780px, 96vw); height: min(720px, 92vh); overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 12px; background: var(--panel); box-shadow: 0 28px 76px rgba(27, 58, 105, .24); } .navigation-manager-drawer > header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px 17px; border-bottom: 1px solid var(--row-line); } .navigation-manager-drawer > header h2{ margin: 0; color: var(--text); font-size: 18px; } .navigation-manager-drawer > header p{ margin: 6px 0 0; color: var(--text-3); font-size: 12px; } .navigation-manager-drawer > header button{ flex: none; } .navigation-manager-drawer > header [data-manager-close]{ width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-size: 20px; line-height: 1; cursor: pointer; transition: background .14s ease, color .14s ease; } .navigation-manager-drawer > header [data-manager-close]:hover{ background: var(--hover); color: var(--text); } .manager-body{ display: flex; flex: 1; min-height: 0; } .manager-groups{ flex: 1; min-width: 0; overflow: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; background: var(--input-bg); } .manager-list{ display: flex; flex-direction: column; gap: 6px; } .manager-item{ border: 1px solid var(--row-line); border-radius: 8px; background: var(--panel); cursor: grab; user-select: none; transition: opacity .14s ease, border-color .14s ease; } .manager-item:hover{ border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); } .manager-item.is-dragging{ opacity: .45; border-color: var(--accent); } .manager-item.is-hidden{ opacity: .42; } .manager-item.is-hidden .manager-name{ text-decoration: line-through; } .manager-row{ display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 8px; } .manager-branch{ display: flex; flex-direction: column; } .manager-branch > .manager-list{ margin: 0 0 8px 16px; padding-left: 14px; border-left: 2px solid var(--row-line); } .manager-name{ flex: 1; min-width: 0; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manager-drag{ flex: none; display: flex; align-items: center; color: var(--text-3); cursor: grab; } .manager-drag svg{ fill: currentColor; display: block; } .manager-toggle{ position: relative; flex: none; width: 34px; height: 20px; } .manager-toggle input{ position: absolute; opacity: 0; width: 1px; height: 1px; } .manager-toggle i{ box-sizing: border-box; position: absolute; inset: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--hover); transition: background .16s ease; } .manager-toggle i::after{ content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); transition: transform .16s ease; } .manager-toggle input:checked + i{ border-color: var(--accent); background: var(--accent); } .manager-toggle input:checked + i::after{ transform: translateX(14px); } .manager-toggle.is-disabled{ opacity: .45; } .manager-preview{ flex: none; width: 200px; border-left: 1px solid var(--row-line); background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel)); padding: 14px; overflow: auto; } .manager-preview > header{ font-size: 11px; color: var(--text-3); margin-bottom: 10px; } .manager-preview-list{ display: flex; flex-direction: column; gap: 4px; } .manager-preview-root{ display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--row-line); } .manager-preview-dot{ flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .manager-preview-root b{ flex: 1; min-width: 0; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manager-preview-count{ flex: none; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10px; text-align: center; } .manager-preview-hint{ margin: 10px 0 0; font-size: 10px; color: var(--text-3); } .navigation-manager-drawer > footer{ display: flex; flex-direction: column; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--row-line); background: var(--panel); } .navigation-manager-drawer > footer > div{ display: flex; align-items: center; gap: 8px; } .navigation-manager-drawer > footer > div > span{ flex: 1; } .manager-error{ margin: 0; min-height: 16px; font-size: 11px; color: var(--danger, #c62828); } @media (max-width: 640px){ .navigation-manager-mask{ padding: 8px; } .navigation-manager-drawer{ width: 100%; height: 96vh; } .manager-preview{ display: none; } } [data-theme="f"] .section-nav-row, [data-theme="f"] .version-nav-row, [data-theme="f"] .management-nav-row, [data-theme="f"] .delivery-nav-row, [data-theme="f"] .quality-governance-nav-row, [data-theme="f"] .governance-nav-row, [data-theme="f"] .system-nav-row{ min-height: 38px; margin-top: 5px; padding: 8px 9px; color: var(--text-2); background: transparent; box-shadow: none; } [data-theme="f"] .management-nav-row{ margin-top: 12px; border-top: 1px solid var(--row-line); border-radius: 0; padding-top: 13px; } [data-theme="f"] .section-nav-row .node-count, [data-theme="f"] .version-nav-row .node-count, [data-theme="f"] .management-nav-row .node-count, [data-theme="f"] .delivery-nav-row .node-count, [data-theme="f"] .quality-nav-row .node-count, [data-theme="f"] .quality-governance-nav-row .node-count, [data-theme="f"] .governance-nav-row .node-count, [data-theme="f"] .trust-nav-row .node-count, [data-theme="f"] .system-nav-row .node-count{ min-width: 28px; padding: 2px 7px; border-radius: 999px; background: var(--hover); color: var(--text-3); text-align: center; } /* “链路”是功能标签，不是数量：使用更明确的胶囊样式，避免在侧栏中被误读或看不清。 */ [data-theme="f"] .version-nav-row .node-count{ min-width: 40px; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: .04em; } [data-theme="f"] .section-nav-row .node-icon, [data-theme="f"] .version-nav-row .node-icon, [data-theme="f"] .management-nav-row .node-icon, [data-theme="f"] .delivery-nav-row .node-icon, [data-theme="f"] .quality-nav-row .node-icon, [data-theme="f"] .quality-governance-nav-row .node-icon, [data-theme="f"] .governance-nav-row .node-icon, [data-theme="f"] .trust-nav-row .node-icon, [data-theme="f"] .system-nav-row .node-icon{ width: auto; height: auto; background: transparent; color: var(--text-3); } [data-theme="f"] .system-nav-row{ margin-top: 14px; border-top: 1px solid var(--row-line); border-radius: 0; padding-top: 13px; } [data-theme="f"] .section-nav-row.expanded, [data-theme="f"] .version-nav-row.expanded, [data-theme="f"] .management-nav-row.expanded, [data-theme="f"] .delivery-nav-row.expanded, [data-theme="f"] .quality-nav-row.expanded, [data-theme="f"] .quality-governance-nav-row.expanded, [data-theme="f"] .governance-nav-row.expanded, [data-theme="f"] .trust-nav-row.expanded, [data-theme="f"] .system-nav-row.expanded{ color: var(--text-2); } [data-theme="f"] .section-nav-row.expanded .node-icon, [data-theme="f"] .version-nav-row.expanded .node-icon, [data-theme="f"] .management-nav-row.expanded .node-icon, [data-theme="f"] .delivery-nav-row.expanded .node-icon, [data-theme="f"] .quality-nav-row.expanded .node-icon, [data-theme="f"] .quality-governance-nav-row.expanded .node-icon, [data-theme="f"] .governance-nav-row.expanded .node-icon, [data-theme="f"] .trust-nav-row.expanded .node-icon, [data-theme="f"] .system-nav-row.expanded .node-icon{ color: var(--text-3); } [data-theme="f"] .delivery-nav-children{ margin-left: 0; padding-left: 9px; } [data-theme="f"] .system-nav-children{ margin-left: 0; padding-left: 9px; } [data-theme="f"] .system-nav-admin-tools{ margin-top: 0; padding-top: 0; border-top: 0; } [data-theme="f"] .system-nav-admin-tools .system-nav-action{ width: 100%; border: 0; background: transparent; color: var(--text-2); text-align: left; font: inherit; cursor: pointer; } [data-theme="f"] .system-nav-admin-tools .system-nav-action:hover{ background: var(--hover); color: var(--accent); } [data-theme="f"] .system-nav-admin-tools .system-nav-action .node-name{ font-size: 13px; } [data-theme="f"] .system-nav-admin-tools .system-nav-action .node-icon{ color: var(--accent); } [data-theme="f"] .domain-nav-row, [data-theme="f"] .catalog-kind-nav-row{ min-height: 38px; margin: 2px 0; padding: 6px 9px; border-radius: 12px; } [data-theme="f"] .domain-nav-row .node-icon, [data-theme="f"] .catalog-kind-nav-row .node-icon, [data-theme="f"] .dashboard-nav-row .node-icon, [data-theme="f"] .operation-log-nav-row .node-icon{ display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 12px; } [data-theme="f"] .dashboard-nav-row .node-icon{ background: var(--amber-soft); color: var(--amber); } [data-theme="f"] .domain-nav-row .node-count, [data-theme="f"] .catalog-kind-nav-row .node-count, [data-theme="f"] .dashboard-nav-row .node-count{ min-width: 26px; padding: 2px 6px; border-radius: 999px; background: var(--hover); color: var(--text-3); text-align: center; } [data-theme="f"] .domain-nav-row:hover, [data-theme="f"] .catalog-kind-nav-row:hover{ background: var(--hover); transform: translateX(2px); } /* ============================================================ 基础与组件 ============================================================ */ *{ box-sizing: border-box; } html, body{ margin: 0; height: 100%; } body{ font-family: "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "阿里巴巴普惠体", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background .2s, color .2s; } .management-subchildren{ margin-left: 19px; padding-left: 8px; border-left: 1px solid var(--row-line); } .management-subchildren .management-leaf-row{ min-height: 31px; } .management-subchildren .node-count{ font-size: 10px; } .app{ display: flex; flex-direction: column; height: 100vh; } .topbar{ height: 54px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 22px; background: var(--panel); border-bottom: 1px solid var(--border); } .brand{ display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 14px; letter-spacing: 0.2px; } .logo{ width: 17px; height: 17px; border-radius: 4px; background: var(--accent); display: inline-block; } .meta{ flex: 1; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .actions{ position: relative; display: flex; gap: 8px; align-items: center; } /* ========== main ========== */ .notification-button{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--text-2); cursor: pointer; } .notification-button:hover, .notification-button.active{ border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .notification-bell{ display: inline-flex; } .notification-bell svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .notification-button > b{ position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--panel); border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; line-height: 14px; text-align: center; } .notification-popover{ position: absolute; z-index: 80; top: 44px; right: 92px; width: min(390px, calc(100vw - 28px)); max-height: min(560px, calc(100vh - 92px)); overflow: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); box-shadow: 0 20px 55px rgba(23, 32, 51, .18); } .notification-popover-head{ position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid var(--row-line); background: var(--panel); } .notification-popover-head div{ display: flex; align-items: baseline; gap: 8px; } .notification-popover-head b{ color: var(--text); font-size: 14px; } .notification-popover-head span{ color: var(--text-3); font-size: 11px; } .notification-popover-head button{ border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; } .notification-list{ display: grid; padding: 7px; } .notification-item{ display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: start; padding: 12px 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; } .notification-item:hover{ background: var(--hover); } .notification-item.unread{ background: color-mix(in srgb, var(--accent-soft) 58%, transparent); } .notification-item > i{ width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: transparent; } .notification-item.unread > i{ background: var(--accent); } .notification-item > span{ min-width: 0; } .notification-item b, .notification-item small, .notification-item em{ display: block; } .notification-item b{ overflow: hidden; color: var(--text); font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } .notification-item small{ margin-top: 4px; color: var(--text-2); font-size: 11px; line-height: 1.5; } .notification-item em{ margin-top: 6px; color: var(--text-3); font-size: 10px; font-style: normal; } .notification-item > strong{ padding: 3px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 9px; white-space: nowrap; } .notification-item > strong.handled{ background: var(--hover); color: var(--text-3); } .notification-empty{ padding: 44px 20px; color: var(--text-3); font-size: 12px; text-align: center; } @media (max-width: 900px) { .notification-popover{ position: fixed; top: 62px; right: 14px; } } .main{ flex: 1; display: flex; min-height: 0; } .sidebar{ width: 300px; flex: none; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; } .search-box{ padding: 12px 14px; border-bottom: 1px solid var(--border); } .search-box input{ width: 100%; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; outline: none; background: var(--input-bg); color: var(--text); } .search-box input:focus{ border-color: var(--accent); background: var(--panel); } /* ========== content ========== */ .tree{ display: flex; flex: 1; flex-direction: column; overflow: auto; padding: 8px 8px; /* Keep the navigation scrollable without showing a distracting scrollbar. */ scrollbar-width: none; -ms-overflow-style: none; } .tree::-webkit-scrollbar{ width: 0; height: 0; display: none; } .tree-row{ display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; cursor: pointer; user-select: none; white-space: nowrap; } .tree-row:hover{ background: var(--hover); } .tree-row.selected{ background: var(--accent-soft); color: var(--accent); } .tree-row .caret{ width: 14px; text-align: center; color: var(--text-3); flex: none; font-size: 11px; transition: transform .15s; } .tree-row .caret.open{ transform: rotate(90deg); } .tree-row .caret.leaf{ visibility: hidden; } .tree-row .node-icon{ flex: none; font-size: 14px; color: var(--text-3); } .tree-row .node-icon svg{ display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tree-row .node-name{ flex: 1; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } .tree-row .node-count{ font-size: 12px; color: var(--text-3); flex: none; } .tree-row.selected .node-icon, .tree-row.selected .node-count{ color: var(--accent); } .tree-row .add-btn{ flex: none; width: 17px; height: 17px; line-height: 17px; text-align: center; border-radius: 4px; color: var(--text-3); font-size: 13px; visibility: hidden; } .tree-row:hover .add-btn{ visibility: visible; } .tree-row .add-btn:hover{ background: var(--accent); color: var(--accent-contrast); } .tree-children{ margin-left: 18px; } .tree-children .tree-row{ padding-left: 7px; } .content{ flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 16px 22px; gap: 10px; } .navigation-row{ display: flex; align-items: center; gap: 14px; min-height: 32px; height: 32px; box-sizing: border-box; flex: none; } .breadcrumb{ font-size: 12px; color: var(--text-3); } .breadcrumb b{ color: var(--text-2); font-weight: 500; } .back-parent{ flex: none; } .back-parent[hidden]{ display: none; } .breadcrumb-link{ padding: 0; border: 0; background: transparent; color: var(--text-3); font: inherit; cursor: pointer; text-decoration: none; } .breadcrumb-link:hover{ color: var(--accent); text-decoration: none; } .breadcrumb-label{ color: inherit; } .breadcrumb-separator{ margin: 0 6px; color: var(--border-strong); } .dashboard{ height: 100%; padding: 16px; overflow: auto; } .dashboard-topline{ display: grid; grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr); align-items: center; gap: 16px; } .dashboard-view-switch button.active{ background: var(--panel); color: var(--accent); box-shadow: 0 1px 4px rgba(35, 86, 160, .12); font-weight: 650; } .dashboard-search{ display: flex; align-items: center; justify-self: end; width: min(340px, 100%); height: 36px; padding: 0 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text-3); } .dashboard-search[hidden], .coverage-overview[hidden], .dashboard-overview[hidden], .quality-trend[hidden]{ display: none; } .dashboard-search input{ width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; } .dashboard-search span{ margin-right: 6px; font-size: 16px; } .dashboard-result{ margin: 9px 0 10px; color: var(--text-3); font-size: 11px; } .coverage-overview{ display: block; margin: 10px 0 12px; } .coverage-overview, .dashboard-overview, .quality-trend{ animation: dashboard-view-enter .12s ease-out; } @keyframes dashboard-view-enter { from { opacity: .72; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } .coverage-summary-grid{ display: grid; grid-template-columns: repeat(3, minmax(130px, .72fr)) minmax(300px, 1.8fr); gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, var(--panel)), var(--panel)); } .coverage-kpi{ display: flex; flex-direction: column; justify-content: center; min-height: 65px; padding: 0 12px; border-right: 1px solid var(--row-line); } .coverage-kpi span{ color: var(--text-3); font-size: 11px; } .coverage-kpi b{ margin-top: 4px; color: var(--text); font-size: 22px; line-height: 1; } .coverage-kpi small{ margin-top: 5px; color: var(--text-3); font-size: 10px; } .coverage-kpi.accent b{ color: var(--accent); } .coverage-chart{ display: grid; gap: 6px; align-content: center; padding-left: 8px; } .coverage-chart-row{ display: grid; grid-template-columns: 76px minmax(80px, 1fr) 45px; align-items: center; gap: 8px; padding: 3px 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; font-size: 11px; text-align: left; cursor: pointer; } .coverage-chart-row:hover, .coverage-chart-row.active{ border-color: color-mix(in srgb, var(--accent) 16%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); } .coverage-chart-row:hover span, .coverage-chart-row:hover b, .coverage-chart-row.active span, .coverage-chart-row.active b{ color: var(--accent); } .coverage-chart-row > i, .coverage-field-row > i{ display: block; height: 7px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); } .coverage-chart-row > i em, .coverage-field-row > i em{ display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 58%, #8ac7ff)); } .coverage-chart-row b{ color: var(--text-2); font-size: 11px; text-align: right; } .dashboard-domain-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .dashboard-card{ min-width: 0; height: 176px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .dashboard-card[hidden]{ display: none; } .dashboard-card{ cursor: pointer; } .dashboard-card-body{ display: flex; flex-direction: column; width: 100%; height: 100%; padding: 14px; } .dashboard-card:hover{ border-color: color-mix(in srgb, var(--domain-accent) 42%, var(--border)); transform: translateY(-2px); } .dashboard-card{ transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .dashboard-card-head{ display: flex; align-items: center; gap: 9px; } .dashboard-icon{ display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex: none; border-radius: 8px; background: color-mix(in srgb, var(--domain-accent) 16%, #fff); color: var(--domain-accent); } .dashboard-icon svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dashboard-card-title{ min-width: 0; flex: 1; } .dashboard-card h3{ margin: 0; font-size: 14px; font-weight: 650; } .dashboard-card p{ margin: 2px 0 0; color: var(--text-3); font-size: 11px; } .dashboard-size{ display: flex; flex-direction: column; align-items: flex-end; color: var(--text-3); font-size: 10px; line-height: 1.1; } .dashboard-size b{ color: var(--domain-accent); font-size: 22px; font-weight: 650; } .dashboard-arrow{ color: var(--domain-accent); font-size: 11px; } .dashboard-summary{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; margin-top: 12px; } .dashboard-summary span{ display: flex; justify-content: space-between; gap: 5px; min-width: 0; color: var(--text-2); font-size: 11px; } .dashboard-summary b{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .dashboard-summary em{ color: var(--text-3); font-style: normal; } .dashboard-summary .dashboard-summary-more{ grid-column: 1 / -1; color: var(--text-3); } .dashboard-distribution{ display: flex; height: 5px; gap: 2px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--domain-accent) 10%, #fff); } .dashboard-distribution i{ min-width: 3px; border-radius: inherit; background: var(--domain-accent); } .dashboard-card-foot{ display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; color: var(--text-3); font-size: 10px; line-height: 1.2; } .panel:has(.dashboard){ position: relative; overflow: hidden; } .dashboard-drawer-mask{ position: absolute; inset: 0; z-index: 4; background: rgba(47, 52, 55, .16); } .dashboard-drawer-mask[hidden], .dashboard-drawer[hidden]{ display: none; } .dashboard-drawer{ position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(560px, 68%); display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--border); box-shadow: -14px 0 32px rgba(31, 65, 108, .12); } .dashboard-drawer-head{ display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--row-line); } .dashboard-drawer-head h2{ margin: 0; font-size: 18px; } .dashboard-drawer-head p{ margin: 4px 0 0; color: var(--text-3); font-size: 12px; } .dashboard-drawer-close{ width: 28px; height: 28px; border: 0; font-size: 20px; cursor: pointer; } .dashboard-drawer-body{ flex: 1; min-height: 0; overflow: auto; padding: 4px 20px 16px; } .coverage-field-row{ display: grid; grid-template-columns: minmax(100px, 1.25fr) minmax(80px, 1fr) 43px 52px; align-items: center; gap: 8px; font-size: 11px; } .coverage-field-row > span{ overflow: hidden; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; } .coverage-field-row > b{ color: var(--accent); font-size: 11px; text-align: right; } .coverage-field-row > small{ color: var(--text-3); font-size: 10px; text-align: right; } .coverage-empty{ padding: 18px 0; color: var(--text-3); font-size: 12px; } .coverage-analysis-panel{ border: 1px solid var(--border); border-radius: 12px; background: var(--panel); box-shadow: 0 4px 12px rgba(47, 52, 55, .025); } .coverage-panel-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px 10px; border-bottom: 1px solid var(--row-line); } .coverage-panel-head h3{ margin: 0; color: var(--text); font-size: 14px; font-weight: 700; } .coverage-panel-head p{ margin: 3px 0 0; color: var(--text-3); font-size: 11px; } .coverage-panel-head > span{ padding: 4px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 650; white-space: nowrap; } .coverage-panel-head select{ min-width: 150px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text-2); font: inherit; font-size: 11px; outline: 0; } .coverage-bucket-bar .good, .coverage-bucket-list .good{ background: #4d93ff; } .coverage-bucket-bar .low, .coverage-bucket-list .low{ background: #f5a524; } .coverage-bucket-bar .empty, .coverage-bucket-list .empty{ background: #d8e1ee; } .coverage-fields-panel{ margin-top: 12px; } .coverage-domain-tabs{ display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 15px 10px; border-bottom: 1px solid var(--row-line); } .coverage-domain-tabs button{ min-height: 28px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--input-bg); color: var(--text-2); font: inherit; font-size: 11px; cursor: pointer; } .coverage-domain-tabs button:hover, .coverage-domain-tabs button.active{ border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 650; } .coverage-field-table-head{ display: grid; grid-template-columns: minmax(180px, 1.25fr) minmax(220px, 1fr) 70px; gap: 12px; padding: 9px 15px; border-bottom: 1px solid var(--row-line); color: var(--text-3); font-size: 10px; } .coverage-field-table{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; max-height: 360px; overflow: auto; padding: 4px 15px 12px; } .coverage-field-table .coverage-field-row{ grid-template-columns: minmax(120px, 1.1fr) minmax(120px, 1fr) 54px; gap: 10px; min-height: 34px; border-bottom: 1px solid var(--row-line); } .coverage-field-group{ min-width: 0; align-self: start; margin-top: 8px; padding: 0 11px 6px; border: 1px solid var(--row-line); border-radius: 8px; background: var(--panel); } .coverage-field-group h4{ display: flex; align-items: center; justify-content: space-between; margin: 0 -11px; padding: 9px 11px; border-bottom: 1px solid var(--row-line); color: var(--text-2); font-size: 11px; } .coverage-field-group h4 span{ display: grid; min-width: 19px; height: 19px; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 9px; font-weight: 600; } /* ========== dashboard ========== */ .quality-trend{ margin: 10px 0 12px; } .quality-trend-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; margin-bottom: 10px; } .quality-trend-toolbar h3{ margin: 0; color: var(--text); font-size: 14px; } .quality-trend-toolbar p{ margin: 3px 0 0; color: var(--text-3); font-size: 10px; } .quality-trend-actions{ display: inline-flex; align-items: center; gap: 8px; } .quality-demo-toggle{ min-height: 27px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text-2); font: inherit; font-size: 10px; cursor: pointer; } .quality-demo-toggle:hover, .quality-demo-toggle.active{ border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .quality-period-switch{ display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); } .quality-period-switch button{ min-height: 27px; padding: 3px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font: inherit; font-size: 11px; cursor: pointer; } .quality-period-switch button:hover{ color: var(--accent); } .quality-period-switch button.active{ background: var(--panel); color: var(--accent); box-shadow: 0 1px 4px rgba(35,86,160,.12); font-weight: 650; } .quality-loading, .quality-empty{ padding: 26px 16px; color: var(--text-3); font-size: 12px; text-align: center; } .quality-baseline-note{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--accent-soft) 58%, var(--panel)); } .quality-baseline-note b{ flex: none; color: var(--accent); font-size: 11px; } .quality-baseline-note span{ color: var(--text-2); font-size: 11px; } .quality-baseline-note.demo{ border-color: #f1d19c; background: #fff9ee; } .quality-baseline-note.demo b{ color: #b86b12; } .quality-kpi-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .quality-kpi-grid > div{ min-height: 92px; padding: 14px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); box-shadow: 0 4px 12px rgba(47,52,55,.025); } .quality-kpi-grid span{ display: block; color: var(--text-3); font-size: 10px; } .quality-kpi-grid b{ display: block; margin-top: 8px; color: var(--text); font-size: 22px; line-height: 1; } .quality-kpi-grid small{ display: block; margin-top: 8px; color: var(--text-3); font-size: 10px; } .quality-kpi-grid b.positive, .quality-domain-row b.positive, .quality-field-change b.positive{ color: var(--accent); } .quality-kpi-grid b.negative, .quality-domain-row b.negative, .quality-field-change b.negative{ color: var(--danger); } .quality-kpi-grid b.neutral, .quality-domain-row b.neutral, .quality-field-change b.neutral{ color: var(--text-3); } .quality-panel{ min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); box-shadow: 0 4px 12px rgba(47,52,55,.025); overflow: hidden; } .quality-panel-head{ display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 9px; border-bottom: 1px solid var(--row-line); } .quality-panel-head h3{ margin: 0; color: var(--text); font-size: 13px; } .quality-panel-head p{ margin: 3px 0 0; color: var(--text-3); font-size: 10px; } .quality-panel-head > span{ color: var(--text-3); font-size: 10px; } .quality-line-chart{ padding: 10px 14px 8px; } .quality-line-chart svg{ display: block; width: 100%; height: 158px; overflow: visible; } .quality-chart-empty{ display: flex; align-items: center; gap: 14px; min-height: 82px; margin: 10px 14px 12px; padding: 0 18px; border: 1px dashed color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel)); } .quality-chart-empty-value{ color: var(--accent); font-size: 28px; font-weight: 700; letter-spacing: -.04em; } .quality-chart-empty b, .quality-chart-empty span{ display: block; } .quality-chart-empty b{ color: var(--text-2); font-size: 11px; } .quality-chart-empty span{ margin-top: 4px; color: var(--text-3); font-size: 10px; } .quality-line-chart .grid line{ stroke: var(--row-line); stroke-width: 1; } .quality-line-chart .grid text{ fill: var(--text-3); font-size: 9px; } .quality-line-chart .series polygon{ fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: none; } .quality-line-chart .series polyline{ fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .quality-line-chart .series circle{ fill: var(--panel); stroke: color-mix(in srgb, var(--accent) 45%, var(--panel)); stroke-width: 2; vector-effect: non-scaling-stroke; } .quality-line-chart .series circle.latest{ fill: var(--accent); stroke: var(--panel); stroke-width: 3; } .quality-chart-labels{ display: grid; gap: 8px; margin: -20px 18px 0 42px; color: var(--text-3); font-size: 9px; text-align: center; } .quality-chart-labels span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quality-detail-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 10px; margin-top: 10px; } .quality-domain-list, .quality-field-changes{ max-height: 300px; overflow: auto; padding: 5px 14px 10px; } .quality-domain-row{ display: grid; grid-template-columns: minmax(110px, .85fr) minmax(120px, 1fr) 48px 48px; align-items: center; gap: 10px; min-height: 42px; border-bottom: 1px solid var(--row-line); cursor: pointer; transition: background .12s ease, padding .12s ease; } .quality-domain-row:hover{ background: var(--accent-soft); } .quality-domain-row.active{ margin: 0 -6px; padding: 0 6px; border-radius: 8px; background: var(--accent-soft); } .quality-clear-domain{ border: 0; padding: 3px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 10px; cursor: pointer; } .quality-clear-domain[hidden]{ display: none; } .quality-domain-row > span{ min-width: 0; } .quality-domain-row > span b, .quality-domain-row > span small{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quality-domain-row > span b{ color: var(--text-2); font-size: 11px; } .quality-domain-row > span small{ margin-top: 2px; color: var(--text-3); font-size: 9px; font-weight: 400; } .quality-domain-row > i{ height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); } .quality-domain-row > i em{ display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 58%, #8ac7ff)); } .quality-domain-row > strong{ color: var(--text-2); font-size: 11px; text-align: right; } .quality-domain-row > b{ font-size: 10px; text-align: right; } .quality-field-change{ display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; border-bottom: 1px solid var(--row-line); } .quality-field-change span{ min-width: 0; } .quality-field-change span b, .quality-field-change span small{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quality-field-change span b{ color: var(--text-2); font-size: 11px; } .quality-field-change span small{ margin-top: 2px; color: var(--text-3); font-size: 9px; font-weight: 400; } .quality-field-change > b{ flex: none; font-size: 11px; } .dashboard-detail-group{ padding: 14px 0; border-bottom: 1px solid var(--row-line); } .dashboard-detail-group h3{ margin: 0 0 9px; color: var(--text-2); font-size: 13px; } .dashboard-detail-group h3 span{ margin-left: 5px; color: var(--text-3); font-weight: 400; } .dashboard-field-list{ display: flex; flex-wrap: wrap; gap: 6px; } .dashboard-field-list button{ padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; } .dashboard-field-list button:hover{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .dashboard-fields-view[hidden], .dashboard-samples-view[hidden]{ display: none; } .dashboard-example-list{ display: grid; gap: 5px; } .dashboard-example-row{ display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--row-line); border-radius: 8px; background: var(--input-bg); } .dashboard-example-row button{ overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .dashboard-example-row button:hover{ text-decoration: underline; } .dashboard-example-row span{ overflow: hidden; color: var(--text); font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .dashboard-example-row span.empty{ color: var(--text-3); } .dashboard-drawer-foot{ display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; } /* 详情抽屉必须是实色层，避免玻璃主题下目录卡片文字穿透。 */ .dashboard-drawer, .dashboard-drawer-head, .dashboard-drawer-body, .dashboard-drawer-foot{ background: var(--panel) !important; opacity: 1 !important; } .field-preview-card{ position: fixed; z-index: 30; width: min(380px, calc(100vw - 24px)); max-height: min(520px, calc(100vh - 24px)); overflow: auto; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; appearance: none; color: var(--text); transform-origin: center; } .field-preview-card[hidden]{ display: none; } .field-preview-head{ padding: 14px 16px 12px; border-bottom: 1px solid var(--row-line); } .field-preview-head span{ display: block; margin-bottom: 4px; color: var(--accent); font-size: 10px; font-weight: 650; letter-spacing: .08em; } .field-preview-head h3{ margin: 0; color: var(--text); font-size: 14px; line-height: 1.4; } .field-preview-table{ padding: 4px 16px 8px; } .field-preview-table > div{ display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--row-line); } .field-preview-table > div:last-child{ border-bottom: 0; } .field-preview-table span{ color: var(--text-3); font-size: 11px; line-height: 1.55; } .field-preview-table b{ color: var(--text-2); font-size: 12px; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; } .field-preview-table b.empty{ color: var(--text-3); font-weight: 400; } /* 实际数据管理 */ .data-manager{ display: flex; flex-direction: column; height: 100%; min-height: 0; } .data-manager-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 8px; } .data-manager-count{ color: var(--text); font-size: 14px; font-weight: 600; } .data-manager-hint{ margin-left: 10px; color: var(--text-3); font-size: 11px; } .data-manager-actions{ display: flex; gap: 7px; } .data-manager-search{ display: flex; gap: 7px; padding: 0 14px 10px; border-bottom: 1px solid var(--row-line); } .data-manager-search input{ width: min(440px, 60%); padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; outline: 0; background: var(--input-bg); color: var(--text); font: inherit; } .data-manager-search input:focus{ border-color: var(--accent); } .data-manager-search > select{ min-width: 150px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; outline: 0; background: var(--input-bg); color: var(--text); font: inherit; font-size:var(--field-size); } .data-manager-search > select:focus{ border-color: var(--accent); font-size:var(--field-size);} .brand-filter-bar{ align-items: center; flex-wrap: nowrap; } .brand-filter-bar input{ flex: 1 1 260px; width: auto; min-width: 180px; } .brand-filter-bar > select{ flex: 0 1 150px; min-width: 120px; max-width: 170px; } .brand-filter-bar > select:disabled{ opacity: .55; cursor: not-allowed; } @media (max-width: 1100px) { .brand-filter-bar{ flex-wrap: wrap; } .brand-filter-bar input{ flex: 1 1 320px; } .brand-filter-bar > select{ flex: 1 1 150px; max-width: none; } } /* ========== community ========== */ .data-filter-wrap{ position: relative; } .data-filter-wrap .filter-active{ color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .data-filter-panel{ position: absolute; z-index: 12; top: calc(100% + 7px); left: 0; width: 460px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); box-shadow: 0 16px 40px rgba(47, 52, 55, .14); } .data-filter-panel[hidden]{ display: none; } .data-filter-title{ display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; } .data-filter-title b{ font-size: 13px; } .data-filter-title span{ color: var(--text-3); font-size: 11px; } .data-filter-fields{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .data-filter-fields label{ color: var(--text-3); font-size: 11px; } .data-filter-fields select{ width: 100%; margin-top: 5px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; outline: 0; background: var(--input-bg); color: var(--text); font: inherit; font-size: 12px; } .data-filter-fields select:focus{ border-color: var(--accent); } .data-filter-actions{ display: flex; justify-content: flex-end; gap: 7px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--row-line); } .data-table-wrap{ flex: 1; min-height: 0; overflow: auto; } .data-record-table{ table-layout: fixed; } .data-record-table .data-col-id{ width: 9%; } .data-record-table .data-col-name{ width: 22%; } .data-record-table .data-col-region{ width: 10%; } .data-record-table .data-col-coordinate{ width: 24%; } .data-record-table .data-col-actions{ width: 15%; } .data-record-table td{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Asset-list density is shared by every dataset; workflow/detail tables retain their own layout. */ :is(.data-record-table,.brand-store-table table){ --asset-row-height:44px; --asset-cell-padding:6px 10px; } :is(.data-record-table,.brand-store-table table) tbody tr{ height:var(--asset-row-height); } :is(.data-record-table,.brand-store-table table) :is(th,td){ padding:var(--asset-cell-padding); vertical-align:middle; line-height:1.4; } :is(.data-record-table,.brand-store-table table) thead th{ height:42px; white-space:nowrap; } .data-record-table th:last-child, .data-record-table td:last-child{ padding-right: 12px; padding-left: 12px; text-align: center; } .data-record-table td.row-actions{ text-align: center; } .community-record-table th:nth-child(1){ width: 12%; } .community-record-table th:nth-child(2){ width: 24%; } .community-record-table th:nth-child(3), .community-record-table th:nth-child(4), .community-record-table th:nth-child(5){ width: 10%; } .community-record-table th:nth-child(6){ width: 12%; } .community-record-table th:last-child{ width: 18%; } .city-record-table th:nth-child(1), .city-record-table th:nth-child(2){ width: 11%; } .city-record-table th:nth-child(3){ width: 13%; } .city-record-table th:nth-child(4), .city-record-table th:nth-child(5), .city-record-table th:nth-child(6){ width: 16%; } .city-record-table th:last-child{ width: 18%; } .brand-library-table{ min-width: 960px; } .brand-library-table th:nth-child(1){ width: 9%; } .brand-library-table th:nth-child(2){ width: 26%; } .brand-library-table th:nth-child(3), .brand-library-table th:nth-child(4), .brand-library-table th:nth-child(5){ width: 10%; } .brand-library-table th:nth-child(6){ width: 20%; } .brand-library-table th:last-child{ width: 15%; } .brand-library-table .brand-column-centered{ text-align: center; } .brand-library-table th.brand-column-centered .table-sort{ position: relative; display: flex; justify-content: center; width: 100%; } .brand-library-table th.brand-column-centered .table-sort span{ position: absolute; right: 0; } .brand-library-table th, .brand-library-table td{ vertical-align: middle; line-height: 1.35; } .brand-library-table tbody td{ vertical-align: middle; } .brand-library-table td.row-actions, .brand-library-table td:last-child{ vertical-align: middle; } .brand-library-table .brand-row-actions{ width:14%; padding-inline:10px; text-align:center; } .brand-category-tag.level-1{ --tag-color: #5967d7; } .brand-category-tag.level-2{ --tag-color: #258f7b; } .brand-category-tag.level-3{ --tag-color: #c58232; } .table-sort{ display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } .table-sort:hover{ color: var(--accent); } .table-sort span{ min-width: 9px; color: var(--accent); font-size: 12px; } .school-name-with-tags{ display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; } .school-tag{ display: inline-flex; align-items: center; min-height: 19px; padding: 1px 6px; border: 1px solid transparent; border-radius: 4px; font-size:var(--field-label-size); line-height: 1.3; font-weight: 600; white-space: nowrap; } .school-tag.tag-985{ border-color: #c7d8ff; background: #edf3ff; color: #245edb; } .school-tag.tag-211{ border-color: #bfe6f5; background: #edfbff; color: #087ca4; } .school-tag.tag-double-first{ border-color: #f2d4a8; background: #fff7e9; color: #b76b12; } .school-gender-ratio{ display: flex; flex-direction: column; gap: 7px; width: min(250px, 100%); } .gender-ratio-tags{ display: flex; align-items: center; gap: 7px; } .gender-tag{ display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 8px; border: 1px solid transparent; border-radius: 8px; font-size: 11px; font-weight: 500; } .gender-tag b{ font-size: 12px; font-weight: 650; } .gender-tag.male{ border-color: #c7d8ff; background: #edf3ff; color: #245edb; } .gender-tag.female{ border-color: #f3d1a6; background: #fff6e8; color: #b9660d; } .gender-ratio-bar{ display: flex; width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: var(--row-line); } .gender-ratio-bar i, .gender-ratio-bar em{ display: block; height: 100%; } .gender-ratio-bar i{ flex: none; background: #3478ea; } .gender-ratio-bar em{ flex: 1; background: #f2a33a; } .brand-store-count-link{ padding:2px 6px; border:0; border-radius:4px; background:transparent; color:var(--accent); font:inherit; font-variant-numeric:tabular-nums; cursor:pointer; } .brand-store-count-link:hover{ background:var(--accent-soft); text-decoration:underline; } .brand-store-count-empty{ color:var(--text-3); font-size:12px; } .brand-computed-value small{ display:block; margin-top:4px; color:var(--text-3); font-size:10px; } .brand-logo-cell{ text-align: center; } .brand-name-cell{ display:flex; align-items:center; gap:11px; min-width:0; text-align:left; } .brand-name-cell-logo{ flex:0 0 28px; display:inline-flex; align-items:center; justify-content:center; } .brand-name-cell-logo .brand-logo{ width:28px; height:28px; border-radius:8px; } .brand-name-cell-text{ min-width:0; overflow:hidden; color:var(--text); font-size:var(--field-size); font-weight:560; text-overflow:ellipsis; white-space:nowrap; } /* Record names use the store-list typography and interaction across datasets. */ :is(.data-record-table button.data-record-name-link,.brand-store-table .brand-store-name-link){ appearance:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; padding:0; border:0; border-radius:8px; background:transparent; box-shadow:none; text-decoration:none; transition:color 150ms ease; color:var(--record-name-color); font:inherit; font-weight:var(--record-name-weight); line-height:inherit; text-align:left; cursor:pointer; } :is(.data-record-table button.data-record-name-link,.brand-store-table .brand-store-name-link):hover{ color:var(--record-name-hover-color); text-decoration:none; } :is(.data-record-table button.data-record-name-link,.brand-store-table .brand-store-name-link):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } .record-name-label{ display:inline-block; box-sizing:border-box; max-width:100%; padding:2px 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; border-radius:8px; background:transparent; transition:background-color 150ms ease; } :is(.data-record-table button.data-record-name-link,.brand-store-table .brand-store-name-link):is(:hover,:focus-visible) > .record-name-label{ background:var(--record-name-hover-bg); } @media (prefers-reduced-motion:reduce) { :is(.data-record-table button.data-record-name-link,.brand-store-table .brand-store-name-link), .record-name-label{ transition:none; } } .brand-logo{ display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 8px; background: var(--panel); vertical-align: middle; } .brand-logo img{ width: 100%; height: 100%; object-fit: contain; } .brand-logo-fallback{ background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 14%, #fff), color-mix(in srgb, var(--amber) 10%, #fff)); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); } .record-value .multi-value-tags{ display: flex; flex-wrap: wrap; gap: 6px; padding-top: 1px; } .value-tag{ display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--accent-soft) 72%, var(--panel)); color: var(--text-2); font-size: 12px; line-height: 1.35; } /* ========== is ========== */ .brand-logo.large{ width: 46px; height: 46px; border-radius: 12px; font-size: 16px; } .brand-record-identity{ display: flex; align-items: center; gap: 12px; } .brand-record-identity h2{ margin: 0; } .brand-field-hint{ color:var(--text-3); font-size:12px; } .brand-field-error{ color:var(--danger); font-size:12px; } .brand-field-error[hidden]{ display:none; } #panel #brandNameInput[aria-invalid="true"]{ border-color:var(--danger) !important; } /* One confirmation surface, with a scrollable diff and persistent actions. */ .brand-change-dialog{ width:min(740px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); box-sizing:border-box; padding:0; margin:auto; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb,var(--accent) 3%,white); color:var(--text); box-shadow:0 24px 80px rgba(25,48,78,.24); } .brand-change-dialog[open]{ display:flex; flex-direction:column; } .brand-change-dialog::backdrop{ background:rgba(25,42,64,.38); backdrop-filter:blur(4px); } .brand-change-dialog header{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:22px 24px 18px; border-bottom:1px solid var(--row-line); background:color-mix(in srgb,var(--accent-soft) 40%,white); } .brand-change-eyebrow{ color:var(--accent); font-size:11px; font-weight:600; } .brand-change-dialog h2{ margin:6px 0; font-size:20px; font-weight:650; letter-spacing:-.02em; } .brand-change-dialog header p{ margin:0; font-size:12px; color:var(--text-2); overflow-wrap:anywhere; } .brand-change-close{ flex:none; width:30px; height:30px; border:1px solid var(--border); border-radius:8px; background:transparent; color:var(--text-2); font-size:22px; cursor:pointer; } .brand-change-tools{ display:flex; align-items:end; gap:12px; padding:12px 24px 0; } .brand-change-tools label{ display:grid; gap:5px; flex:1; min-width:0; } .brand-change-tools label > span{ color:var(--text-3); font-size:11px; } .brand-change-tools input{ box-sizing:border-box; width:100%; min-height:34px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); font:12px/1.4 inherit; outline:none; } .brand-change-tools input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); } .brand-change-tools > span{ flex:none; padding-bottom:8px; color:var(--text-3); font-size:11px; white-space:nowrap; } .brand-change-body{ min-height:0; overflow:auto; padding:18px 24px; display:grid; gap:12px; } .brand-change-item{ padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--panel) 65%,white); } .brand-change-body.is-summary{ gap:7px; padding-top:14px; } .brand-change-summary-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; min-height:42px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb,var(--panel) 65%,white); } .brand-change-summary-item > span:first-child{ min-width:0; color:var(--text-2); font-size:12px; font-weight:550; overflow-wrap:anywhere; } .brand-change-summary-result .data-value{ color:inherit; } .brand-change-item h3{ display:flex; justify-content:space-between; gap:10px; margin:0 0 12px; font-size:13px; font-weight:600; } .brand-change-item h3 span{ color:var(--accent); background:var(--accent-soft); border-radius:4px; padding:2px 6px; font-size:10px; font-weight:500; } .brand-change-comparison{ display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); gap:10px; align-items:stretch; } .brand-change-comparison small{ display:block; margin-bottom:7px; font-size:10px; color:var(--text-3); } .brand-change-comparison > div{ min-width:0; padding:10px 12px; border-radius:8px; } .brand-change-comparison > div > div{ white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.65; } .brand-change-before{ color:var(--text-2); background:rgba(126,144,164,.08); } .brand-change-after{ color:var(--accent); background:color-mix(in srgb,var(--accent-soft) 70%,white); } .is-added .brand-change-after{ color:#24785b; background:#edf8f2; } .is-cleared .brand-change-after{ color:#a66923; background:#fff5e6; } /* ========== school ========== */ .brand-change-arrow{ align-self:center; text-align:center; color:var(--text-3); } .brand-change-empty{ font-size:12px; opacity:.75; } .brand-change-dialog .brand-logo{ width:64px; height:64px; } .brand-change-dialog footer{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; border-top:1px solid var(--row-line); } .brand-change-dialog footer > span{ font-size:11px; color:var(--text-3); } .brand-change-dialog footer > div{ display:flex; gap:8px; } .brand-change-dialog button:disabled{ opacity:.55; cursor:wait; } .brand-change-error{ padding:12px 24px; color:var(--danger); font-size:12px; } .brand-change-no-results{ display:grid; gap:5px; place-content:center; min-height:130px; color:var(--text-2); text-align:center; } .brand-change-no-results strong{ font-size:13px; font-weight:600; } .brand-change-no-results span{ color:var(--text-3); font-size:11px; } @media(max-width:640px) { .brand-change-dialog header, .brand-change-dialog footer{ padding:16px; } .brand-change-tools{ align-items:stretch; padding:10px 16px 0; } .brand-change-tools > span{ padding-bottom:8px; } .brand-change-body{ padding:12px 16px; } .brand-change-comparison{ grid-template-columns:minmax(0,1fr); gap:6px; } .brand-change-arrow{ display:none; } .brand-change-summary-item{ grid-template-columns:minmax(0,1fr); gap:5px; } .brand-change-dialog footer > span{ display:none; } .brand-change-dialog footer{ justify-content:flex-end; } } /* Brand founding date has year precision; the native popover escapes card clipping. */ .brand-year-control{ position:relative; min-width:0; } #panel .brand-year-control input{ padding-right:42px; font-variant-numeric:tabular-nums; } .brand-year-toggle{ position:absolute; right:5px; top:3px; display:grid; place-items:center; width:30px; height:30px; padding:6px; border:0; border-radius:8px; background:transparent; color:var(--text-2); cursor:pointer; } .brand-year-toggle:hover{ background:var(--accent-soft); color:var(--accent); } .brand-year-toggle svg{ width:18px; height:18px; } #brandYearError{ display:block; margin-top:5px; color:var(--danger); font-size:11px; } #brandYearError[hidden]{ display:none; } #panel #brandFoundedYear[aria-invalid="true"]{ border-color:var(--danger) !important; } #brandYearPopover{ position:fixed; inset:auto; box-sizing:border-box; margin:0; padding:12px; max-width:calc(100vw - 24px); border:1px solid var(--border); border-radius:16px; color:var(--text); background:var(--panel); box-shadow:0 12px 36px rgba(30,58,91,.18); font-family:inherit; } #brandYearPopover header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; } #brandYearPopover header strong{ font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; } #brandYearPopover button{ border:1px solid transparent; background:transparent; color:var(--text-2); border-radius:8px; font:inherit; font-size:13px; cursor:pointer; } #brandYearPopover header button{ width:30px; height:30px; font-size:22px; } #brandYearPopover button:hover:not(:disabled){ color:var(--accent); background:var(--accent-soft); } #brandYearPopover button:focus-visible, .brand-year-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } #brandYearPopover .brand-year-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } #brandYearPopover .brand-year-grid button{ height:36px; font-variant-numeric:tabular-nums; } #brandYearPopover button[aria-current="date"]{ border-color:var(--border); color:var(--accent); } #brandYearPopover button[aria-pressed="true"]{ background:var(--accent); color:white; font-weight:600; } #brandYearPopover button:disabled{ opacity:.3; cursor:not-allowed; } #brandYearPopover footer{ display:flex; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--row-line); } #brandYearPopover footer button{ padding:5px 10px; color:var(--accent); } .brand-logo-editor{ display:flex; align-items:center; gap:14px; width:min(560px,100%); padding:4px 0 2px; } .brand-logo-editor-preview{ display:grid; flex:0 0 82px; width:82px; height:82px; place-items:center; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); border-radius:12px; background:color-mix(in srgb,var(--accent-soft) 22%,var(--panel)); } .brand-logo-editor-preview .brand-logo.large{ width:68px; height:68px; border-radius:12px; } .brand-logo-editor-controls{ display:grid; gap:7px; min-width:0; max-width:390px; } .brand-logo-editor-controls input[data-logo-source]{ width:100%; box-sizing:border-box; min-height:34px; padding:7px 9px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font:inherit; } .brand-logo-editor-actions{ display:flex; flex-wrap:wrap; gap:7px; } .brand-logo-editor-controls small{ color:var(--text-3); font-size:10px; line-height:1.5; } /* One crop surface: fixed frame, dimmed overflow and shared output previews. */ .brand-logo-crop-dialog{ box-sizing:border-box; width:min(560px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); overflow:auto; margin:auto; padding:0; color:var(--text); border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); border-radius:16px; background:var(--panel); box-shadow:0 22px 55px rgba(27,54,88,.2); } .brand-logo-crop-dialog::backdrop{ background:var(--mask-bg); backdrop-filter:blur(8px) saturate(115%); -webkit-backdrop-filter:blur(8px) saturate(115%); } .brand-logo-crop-dialog header, .brand-logo-crop-dialog footer{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; } .brand-logo-crop-dialog header{ border-bottom:1px solid var(--row-line); } .brand-logo-crop-eyebrow{ color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.14em; } .brand-logo-crop-dialog header h3{ margin:5px 0 4px; font-size:18px; font-weight:650; letter-spacing:-.02em; } .brand-logo-crop-dialog header p{ margin:0; color:var(--text-3); font-size:11px; line-height:1.45; } .brand-logo-crop-close{ display:grid; width:32px; height:32px; flex:none; place-items:center; border:1px solid var(--border); border-radius:12px; background:var(--hover); color:var(--text-2); font-size:20px; cursor:pointer; } .brand-logo-crop-close:hover{ background:var(--accent-soft); color:var(--accent); } .brand-logo-crop-body{ display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:16px; padding:18px 22px 12px; } .brand-logo-crop-stage{ display:grid; justify-items:center; align-content:start; gap:12px; min-width:0; } .brand-logo-crop-surface{ position:relative; width:100%; max-width:350px; aspect-ratio:1; overflow:hidden; border-radius:12px; background:repeating-conic-gradient(#e5eaf0 0 25%,#f7f9fc 0 50%) 50% / 16px 16px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,var(--border)); } .brand-logo-crop-viewport{ display:block; width:100%; height:100%; touch-action:none; cursor:grab; } .brand-logo-crop-viewport:active{ cursor:grabbing; } .brand-logo-crop-viewport:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; } .brand-logo-crop-frame{ position:absolute; inset:16.666667%; pointer-events:none; border:1px solid color-mix(in srgb,var(--action-primary,var(--accent)) 66%,white); box-shadow:0 0 0 300px rgba(20,34,58,.28); } .brand-logo-crop-frame i{ position:absolute; width:15px; height:15px; border:3px solid color-mix(in srgb,var(--action-primary,var(--accent)) 72%,white); } .brand-logo-crop-frame i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0} .brand-logo-crop-frame i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0} .brand-logo-crop-frame i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0} .brand-logo-crop-frame i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0} .brand-logo-crop-frame span{ position:absolute; inset:33.333% 0; border-block:1px solid rgba(255,255,255,.25); opacity:0; transition:opacity .15s; } .brand-logo-crop-frame span:last-child{ inset:0 33.333%; border:0; border-inline:1px solid rgba(255,255,255,.25); } .brand-logo-crop-surface:active .brand-logo-crop-frame span{ opacity:1; } .brand-logo-crop-stage small, .brand-logo-crop-preview p{ margin:0; color:var(--text-3); font-size:10px; line-height:1.5; } .brand-logo-crop-preview{ min-width:0; padding-left:16px; border-left:1px solid var(--row-line); } .brand-logo-crop-preview h4{ margin:0 0 12px; font-size:12px; font-weight:600; } .brand-logo-crop-result{ display:grid; place-items:center; padding:12px; margin-bottom:16px; border:1px solid var(--border); border-radius:12px; background:var(--input-bg); } .brand-logo-crop-result img{ display:block; width:100%; aspect-ratio:1; object-fit:contain; border-radius:16px; background:var(--panel); } .brand-logo-preview-row{ display:flex; align-items:center; gap:12px; margin-bottom:22px; } .brand-logo-preview-row .brand-logo{ flex:none; } .brand-logo-preview-row .brand-logo:not(.large){ width:28px; height:28px; } .brand-logo-preview-row b, .brand-logo-preview-row small{ display:block; font-size:12px; font-weight:500; } .brand-logo-preview-row small{ margin-top:4px; color:var(--text-3); font-size:10px; } .brand-logo-crop-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:0 22px 16px; } .brand-logo-crop-modes{ display:flex; gap:3px; padding:3px; border-radius:8px; background:var(--hover); } .brand-logo-crop-modes .btn{ border:0; box-shadow:none; background:transparent; min-height:30px; padding:5px 10px; } .brand-logo-crop-modes .btn.active{ color:var(--accent); background:var(--panel); box-shadow:0 1px 4px rgba(20,40,70,.10); } .brand-logo-crop-transforms{ display:flex; gap:6px; } .brand-logo-crop-tools label{ display:flex; align-items:center; gap:8px; flex:1; min-width:190px; color:var(--text-2); font-size:12px; white-space:nowrap; } .brand-logo-crop-tools input{ width:100%; min-width:60px; accent-color:var(--accent); } .brand-logo-crop-tools output{ min-width:38px; text-align:right; font-variant-numeric:tabular-nums; } .brand-logo-crop-dialog footer{ border-top:1px solid var(--row-line); background:var(--panel); position:sticky; bottom:0; z-index:1; } .brand-logo-crop-dialog footer [data-crop-status]{ color:var(--text-3); font-size:11px; } .brand-logo-crop-dialog footer > div{ display:flex; flex:none; gap:8px; } .brand-logo-editor [hidden]{ display:none !important; } .brand-logo-crop-dialog [data-crop-preview][hidden]{ display:none !important; } .brand-logo-editor [data-logo-sources]{ display:grid; gap:7px; } @media(max-width:640px){ .brand-logo-crop-body{grid-template-columns:1fr;gap:16px;padding:16px} .brand-logo-crop-preview{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:16px 0 0;border-left:0;border-top:1px solid var(--row-line)} .brand-logo-crop-preview h4{width:100%;margin:0}.brand-logo-crop-result, .brand-logo-crop-preview p{display:none}.brand-logo-preview-row{margin:0} .brand-logo-crop-tools{padding:0 16px 16px}.brand-logo-crop-tools label{flex-basis:100%} .brand-logo-crop-dialog header, .brand-logo-crop-dialog footer{padding:16px}.brand-logo-crop-dialog footer{flex-wrap:wrap}.brand-logo-crop-dialog footer > div{margin-left:auto} } .school-record-table th:nth-child(1){ width: 8%; } .school-record-table th:nth-child(2){ width: 24%; } .school-record-table th:nth-child(3), .school-record-table th:nth-child(4){ width: 11%; } .school-record-table th:nth-child(5), .school-record-table th:nth-child(6), .school-record-table th:nth-child(7){ width: 12%; } .school-record-table th:last-child{ width: 10%; } .scenic-record-table th:nth-child(1){ width: 12%; } .scenic-record-table th:nth-child(2){ width: 25%; } .scenic-record-table th:nth-child(3), .scenic-record-table th:nth-child(4){ width: 14%; } .scenic-record-table th:nth-child(5){ width: 13%; } .scenic-record-table th:nth-child(6){ width: 10%; } .scenic-record-table th:last-child{ width: 12%; } .scenic-filter-bar{ align-items: center; flex-wrap: nowrap; } .scenic-filter-bar input{ flex: 1 1 260px; width: auto; min-width: 200px; } .scenic-filter-bar > select{ flex: 0 1 150px; min-width: 130px; max-width: 180px; } .scenic-filter-bar > select:disabled{ opacity: .55; cursor: not-allowed; } .scenic-category-tag{ display: inline-flex; align-items: center; min-height: 23px; max-width: 100%; padding: 1px 7px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--accent-soft) 64%, var(--panel)); color: var(--text-2); font-size:var(--field-label-size); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .scenic-rating{ display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 1px 7px; border: 1px solid #f2d8a1; border-radius: 8px; background: #fff8e9; color: #ad6a0a; font-size: 12px; } .scenic-rating i{ color: #e4a522; font-style: normal; font-size: 13px; }.scenic-rating b{ font-weight: 650; }.scenic-rating.empty{ border-color: var(--border); background: var(--hover); color: var(--text-3); } @media (max-width: 1100px) { .scenic-filter-bar{ flex-wrap: wrap; } .scenic-filter-bar input, .scenic-filter-bar > select{ flex: 1 1 180px; max-width: none; } } .hotel-record-table th:nth-child(1){ width: 10%; } .hotel-record-table th:nth-child(2){ width: 28%; } .hotel-record-table th:nth-child(3), .hotel-record-table th:nth-child(4), .hotel-record-table th:nth-child(5){ width: 9%; } .hotel-record-table th:nth-child(6), .hotel-record-table th:nth-child(7){ width: 12%; } .hotel-record-table th:last-child{ width: 12%; } .hotel-filter-bar input{ flex: 1 1 320px; width: auto; min-width: 220px; } .hotel-level-tag.standard{ border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 74%, var(--panel)); color: var(--accent); } .hotel-level-tag.high{ border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); color: var(--accent); } .record-value .hotel-tag-group{ padding-top: 1px; }.record-value .hotel-tag{ max-width: 160px; min-height: 23px; font-size: 12px; } /* 空间地图 */ .spatial-map-nav-row .node-icon svg{ stroke-width: 1.7; } .spatial-page{ display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--panel); } .spatial-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--row-line); background: color-mix(in srgb, var(--panel) 94%, var(--accent-soft)); } .spatial-tabs{ display: flex; align-items: center; gap: 6px; overflow-x: auto; } .spatial-tabs button{ display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; } .spatial-tabs button span{ color: var(--text-3); font-size: 10px; }.spatial-tabs button.active{ border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }.spatial-tabs button.active span{ color: inherit; opacity: .8; } .spatial-toolbar-search{ display: flex; align-items: center; gap: 7px; min-width: 390px; }.spatial-toolbar-search input{ flex: 1; min-width: 150px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); font: inherit; font-size: 12px; outline: 0; }.spatial-toolbar-search select{ width: 94px; padding: 8px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); font: inherit; font-size: 12px; } .spatial-body{ display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; flex: 1; min-height: 0; }.spatial-list{ min-height: 0; overflow: auto; border-right: 1px solid var(--row-line); background: var(--panel); }.spatial-list-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 7px; padding: 14px 13px 10px; border-bottom: 1px solid var(--row-line); }.spatial-list-head b{ color: var(--text); font-size: 13px; }.spatial-list-head span{ color: var(--text-3); font-size: 10px; }.spatial-point-item{ display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--row-line); background: transparent; color: var(--text); text-align: left; cursor: pointer; }.spatial-point-item:hover, .spatial-point-item.active{ background: var(--hover); }.spatial-point-item.active{ box-shadow: inset 3px 0 var(--accent); }.spatial-point-item > div{ min-width: 0; flex: 1; }.spatial-point-item b, .spatial-point-item small{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.spatial-point-item b{ font-size: 12px; font-weight: 600; }.spatial-point-item small{ margin-top: 3px; color: var(--text-3); font-size: 10px; }.spatial-point-item em{ color: var(--text-3); font-size: 10px; font-style: normal; white-space: nowrap; }.spatial-point-status{ width: 7px; height: 7px; flex: none; border-radius: 50%; background: #9ba8b6; }.spatial-point-status.verified{ background: #2e9b77; }.spatial-empty{ padding: 32px 14px; color: var(--text-3); font-size: 12px; text-align: center; } .spatial-map-wrap{ position: relative; min-width: 0; min-height: 0; background: #e8edf1; }.spatial-map-wrap > #spatialMapCanvas{ width: 100%; height: 100%; min-height: 440px; }.spatial-map-config{ position: absolute; inset: 50% auto auto 50%; width: min(360px, calc(100% - 40px)); transform: translate(-50%, -50%); padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 14px 40px rgba(27, 48, 68, .14); text-align: center; }.spatial-map-config b{ color: var(--text); font-size: 14px; }.spatial-map-config p{ margin: 8px 0 0; color: var(--text-3); font-size: 12px; line-height: 1.6; }.spatial-map-legend{ position: absolute; right: 12px; bottom: 12px; display: flex; gap: 10px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.7); border-radius: 8px; background: rgba(255,255,255,.88); color: #52606c; font-size: 10px; }.spatial-map-legend span{ display: inline-flex; align-items: center; gap: 4px; }.spatial-map-legend i{ width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #738091; }.spatial-map-legend i.verified{ background: #2e9b77; } .map-data-marker{ width: 17px; height: 17px; border: 2px solid #fff; border-radius: 50% 50% 50% 0; background: #78899a; box-shadow: 0 2px 7px rgba(0,0,0,.28); transform: rotate(-45deg); }.map-data-marker.verified{ background: #2e9b77; }.map-correction-marker{ position:relative; box-sizing:border-box; width:32px; height:36px; padding:0; border:0; background:transparent; box-shadow:none; cursor:grab; } /* The SVG tip is at (16,36), exactly the marker's bottom-center anchor. */ .map-correction-marker svg{ position:absolute; left:7px; bottom:0; display:block; width:18px; height:28px; overflow:visible; pointer-events:none; } .map-correction-marker:active{ cursor:grabbing; } .spatial-inspector{ min-height: 0; overflow: auto; padding: 15px; border-left: 1px solid var(--row-line); background: var(--panel); }.spatial-inspector:not(.open){ opacity: .94; }.spatial-inspector-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }.spatial-inspector-close{ width: 26px; height: 26px; border: 0; border-radius: 8px; background: var(--hover); color: var(--text-2); font-size: 18px; cursor: pointer; }.spatial-dataset-badge, .spatial-editing{ display: inline-flex; padding: 4px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 10px; }.spatial-editing{ background: #fff5dd; color: #a56c12; }.spatial-inspector h3{ margin: 16px 0 5px; color: var(--text); font-size: 16px; line-height: 1.35; }.spatial-address{ margin: 0; color: var(--text-3); font-size: 11px; line-height: 1.5; }.spatial-coordinates{ display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 16px; }.spatial-coordinates div{ padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); }.spatial-coordinates span, .spatial-coordinates b{ display: block; }.spatial-coordinates span{ color: var(--text-3); font-size: 10px; }.spatial-coordinates b{ margin-top: 4px; color: var(--text-2); font-size: 11px; }.spatial-coordinates b.verified{ color: #2e9b77; }.spatial-meta{ display: grid; gap: 6px; margin-top: 12px; }.spatial-meta span{ display: flex; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: 11px; }.spatial-meta b{ color: var(--text-3); font-weight: 400; }.spatial-audit{ display: flex; flex-direction: column; gap: 3px; margin-top: 12px; color: #2e9b77; font-size: 10px; }.spatial-inspector-actions{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }.spatial-search-label, .spatial-note-label{ display: block; margin-top: 16px; color: var(--text-3); font-size: 11px; }.spatial-search-label > div{ display: flex; gap: 5px; margin-top: 6px; }.spatial-search-label input, .spatial-coordinate-form input, .spatial-note-label textarea{ width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 8px; outline: 0; background: var(--input-bg); color: var(--text); font: inherit; font-size: 11px; }.spatial-search-label input:focus, .spatial-coordinate-form input:focus, .spatial-note-label textarea:focus{ border-color: var(--accent); }.spatial-search-label .btn{ flex: none; }.spatial-poi-results{ display: grid; gap: 5px; margin-top: 8px; color: var(--text-3); font-size: 10px; line-height: 1.5; }.spatial-poi-results button{ padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text-2); text-align: left; cursor: pointer; }.spatial-poi-results button:hover{ border-color: var(--accent); background: var(--accent-soft); }.spatial-poi-results b, .spatial-poi-results span{ display: block; }.spatial-poi-results span{ margin-top: 2px; color: var(--text-3); }.spatial-poi-results .error{ color: #bd5d4c; }.spatial-coordinate-form{ display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }.spatial-coordinate-form label{ color: var(--text-3); font-size: 10px; }.spatial-coordinate-form input{ display: block; margin-top: 5px; }.spatial-note-label textarea{ display: block; margin-top: 5px; resize: vertical; } @media (max-width: 1100px) { .spatial-body{ grid-template-columns: 220px minmax(0, 1fr); }.spatial-inspector{ position: absolute; top: 0; right: 0; z-index: 5; width: 300px; height: 100%; box-shadow: -10px 0 25px rgba(30,50,70,.12); }.spatial-toolbar{ flex-direction: column; align-items: stretch; }.spatial-toolbar-search{ min-width: 0; } } @media (max-width: 720px) { .spatial-body{ display: block; position: relative; }.spatial-list{ height: 170px; border-right: 0; border-bottom: 1px solid var(--row-line); }.spatial-map-wrap{ height: calc(100% - 170px); }.spatial-map-wrap > #spatialMapCanvas{ min-height: 380px; } } .data-pagination{ display:flex; align-items:center; gap:16px; min-height:58px; padding:10px 16px; border-top:1px solid var(--row-line); background:color-mix(in srgb,var(--panel) 97%,var(--accent-soft)); color:var(--text-3); font-size:11px; } .data-pagination-summary{ display:flex; align-items:baseline; gap:5px; min-width:145px; white-space:nowrap; } .data-pagination-summary strong{ color:var(--text-2); font-size:12px; font-variant-numeric:tabular-nums; font-weight:650; } .data-pagination-summary span{ color:var(--text-3); font-size:10px; } .data-page-list{ display:flex; align-items:center; gap:4px; } .data-page-btn{ display:inline-grid; min-width:30px; height:30px; place-items:center; padding:0 8px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text-2); font:inherit; font-size:11px; font-variant-numeric:tabular-nums; cursor:pointer; transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease; } .data-page-btn:hover{ border-color:color-mix(in srgb,var(--accent) 32%,var(--border)); background:var(--accent-soft); color:var(--accent); transform:none; } .data-page-btn.active{ border-color:var(--accent); background:var(--accent); color:var(--accent-contrast); box-shadow:0 3px 9px color-mix(in srgb,var(--accent) 22%,transparent); } .data-page-ellipsis{ display:inline-grid; width:20px; height:30px; place-items:center; color:var(--text-3); } .data-pagination-controls{ display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; margin-left:auto; } .data-pagination .page-nav{ display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:72px; height:30px; padding:0 9px; border:1px solid var(--border); border-radius:8px; background:var(--btn-bg); color:var(--text-2); font:inherit; font-size:11px; cursor:pointer; white-space:nowrap; } .data-pagination .page-nav:hover:not(:disabled){ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); } .data-pagination .page-nav i{ color:var(--accent); font-size:16px; font-style:normal; line-height:1; } .page-size-label, .page-jump{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; } .page-size-label select, .page-jump input{ height:30px; border:1px solid var(--border); border-radius:8px; outline:0; background:var(--input-bg); color:var(--text-2); font:inherit; font-size:11px; } .page-size-label select{ min-width:52px; padding:0 22px 0 8px; }.page-jump input{ width:42px; padding:0 5px; text-align:center; } .page-size-label select:focus, .page-jump input:focus{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent); } .governance-page{ padding: 18px; }.governance-hero{ display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 19px 21px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 16px; background: linear-gradient(115deg, color-mix(in srgb, var(--accent-soft) 65%, var(--panel)), var(--panel)); }.governance-hero span, .governance-dialog header span{ color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; }.governance-hero h2{ margin: 6px 0 5px; font-size: 22px; }.governance-hero p{ max-width: 660px; margin: 0; color: var(--text-3); font-size: 12px; line-height: 1.6; }.governance-kpis{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 12px 0; }.governance-kpis div{ padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }.governance-kpis small, .governance-kpis b{ display: block; }.governance-kpis small{ color: var(--text-3); font-size: 11px; }.governance-kpis b{ margin-top: 4px; color: var(--text); font-size: 20px; }.governance-toolbar{ display: flex; align-items: center; gap: 8px; padding: 10px 0; }.governance-toolbar input{ flex: 1; min-width: 200px; }.governance-toolbar input, .governance-toolbar select{ height: 32px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; outline: 0; background: var(--input-bg); color: var(--text); font: inherit; font-size: 12px; }.governance-table{ border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); }.governance-row{ display: grid; grid-template-columns: 1.5fr .9fr 1fr .65fr .8fr .65fr; gap: 10px; align-items: center; min-height: 62px; padding: 0 14px; border-bottom: 1px solid var(--row-line); color: var(--text-2); font-size: 12px; }.governance-row:last-child{ border-bottom: 0; }.governance-row.head{ min-height: 36px; background: var(--hover); color: var(--text-3); font-size: 11px; }.governance-row b, .governance-row small{ display: block; }.governance-row small{ margin-top: 3px; overflow: hidden; color: var(--text-3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.governance-issue, .governance-status{ display: inline-flex; padding: 3px 6px; border-radius: 4px; font-size: 10px; font-weight: 650; }.governance-issue{ background: #fff0ef; color: #be5d51; }.governance-issue.p0{ background: #ffe7e5; color: #bb4439; }.governance-issue.p2{ background: #fff6df; color: #9b731f; }.governance-status{ background: var(--hover); color: var(--text-2); }.governance-status.reviewing{ background: #fff4d9; color: #9b711a; }.governance-status.resolved{ background: #e6f5ee; color: #277c5b; }.governance-mask{ position: fixed; z-index: 40; inset: 0; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(20, 35, 50, .3); }.governance-dialog{ width: min(1120px, 96vw); max-height: 90vh; overflow: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); box-shadow: 0 24px 60px rgba(25,45,65,.22); }.governance-dialog header{ display: flex; justify-content: space-between; gap: 16px; padding: 18px 21px; border-bottom: 1px solid var(--row-line); }.governance-dialog header h3{ margin: 5px 0; font-size: 18px; }.governance-dialog header p{ margin: 0; color: var(--text-3); font-size: 11px; }.governance-dialog header button{ width: 28px; height: 28px; border: 0; border-radius: 8px; background: var(--hover); color: var(--text-2); font-size: 20px; cursor: pointer; }.governance-detail-grid{ display: grid; grid-template-columns: 1fr 1.2fr .9fr; gap: 0; }.governance-detail-grid > *{ min-height: 430px; padding: 17px; border-right: 1px solid var(--row-line); }.governance-detail-grid > *:last-child{ border-right: 0; }.governance-detail-grid h4{ margin: 0 0 13px; color: var(--text); font-size: 13px; }.governance-detail-grid section > label, .governance-edit label{ display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: center; min-height: 37px; border-bottom: 1px solid var(--row-line); color: var(--text-3); font-size: 11px; }.governance-detail-grid label b{ overflow: hidden; color: var(--text-2); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }.governance-edit input, .governance-edit select, .governance-edit textarea{ width: 100%; box-sizing: border-box; padding: 7px; border: 1px solid var(--border); border-radius: 8px; outline: 0; background: var(--input-bg); color: var(--text); font: inherit; font-size: 11px; }.governance-edit textarea{ resize: vertical; }.governance-evidence{ margin-top: 15px; padding: 10px; border-radius: 8px; background: var(--hover); color: var(--text-3); font-size: 11px; }.governance-evidence b, .governance-evidence span{ display: block; }.governance-evidence span{ margin-top: 5px; color: var(--text-2); }.governance-history{ display: grid; gap: 8px; }.governance-history div{ padding: 9px; border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--hover); }.governance-history b, .governance-history span{ display: block; font-size: 10px; }.governance-history span{ margin-top: 3px; color: var(--text-3); }.governance-history p{ margin: 5px 0 0; color: var(--text-2); font-size: 11px; }.governance-dialog footer{ display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--row-line); }.governance-dialog footer span{ flex: 1; } @media (max-width: 900px) { .governance-detail-grid{ grid-template-columns: 1fr; }.governance-detail-grid > *{ min-height: auto; border-right: 0; border-bottom: 1px solid var(--row-line); }.governance-row{ grid-template-columns: 1.4fr 1fr 1fr .8fr; }.governance-row > :nth-child(4), .governance-row > :nth-child(5){ display: none; } }.@media (max-width: 640px){ .governance-page { padding: 11px; }.governance-hero { padding: 14px; }.governance-kpis { grid-template-columns: repeat(2, 1fr); }.governance-toolbar { flex-wrap: wrap; }.governance-toolbar input { flex-basis: 100%; }.governance-row { grid-template-columns: 1.5fr 1fr .65fr; padding: 8px; }.governance-row > :nth-child(3) { display: none; } } @media (max-width: 900px) { .data-pagination{ flex-wrap:wrap; gap:8px 12px; } .data-pagination-controls{ width:100%; justify-content:flex-end; } .data-pagination-summary{ margin-right:auto; } } @media (max-width: 640px) { .data-pagination{ min-height:52px; padding:9px 10px; } .data-pagination-summary{ min-width:0; } .data-pagination-summary span{ display:none; } .data-pagination .page-size-label{ margin-left:auto; } .data-pagination-controls{ justify-content:space-between; } .data-pagination .page-nav{ min-width:34px; padding:0 7px; } .data-pagination .page-nav span{ display:none; } .data-pagination .page-nav i{ font-size:18px; } .data-page-btn, .data-page-ellipsis, .page-jump{ display:none; } .data-page-list::before{ content:'第 ' attr(data-mobile-page) ' 页'; color:var(--text-2); font-size:11px; white-space:nowrap; } } .data-record-form .form-row{ min-width: 0; } @media (max-width: 640px) { .data-filter-panel{ left: auto; right: 0; width: min(420px, 88vw); } .data-filter-fields{ grid-template-columns: 1fr; } } .record-page{ padding: 16px 18px 22px; } .record-page-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--row-line); } .record-page-head h2{ margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; } .record-page-head p{ margin: 5px 0 0; color: var(--text-3); font-size: 12px; } .record-page-actions{ display: flex; gap: 8px; } .record-sections{ display: grid; gap: 10px; padding-top: 12px; } .record-section{ padding: 13px 15px 9px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); } .record-section-title{ display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .record-section-title > span{ display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 650; } .record-section-title h3{ margin: 0; font-size: 14px; font-weight: 650; } .record-section-title p{ margin: 2px 0 0; color: var(--text-3); font-size: 11px; } .record-fields{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .record-value{ min-width: 0; min-height: 55px; padding: 9px 11px; border-top: 1px solid var(--row-line); background: transparent; } .record-value.span-2, .record-fields .form-row.span-2{ grid-column: span 2; } .record-value.wide, .record-fields .form-row.wide{ grid-column: span 4; } .record-value label{ display: block; margin-bottom: 4px; color: var(--text-2); font-size:var(--field-label-size); } .record-value > div{ min-height: 18px; overflow-wrap: anywhere; color: var(--text); font-size:var(--field-size); font-weight: 500; line-height: 1.4; } .record-value.wide{ min-height: auto; } .record-value.wide > div{ font-size: 13px; font-weight: 400; } .record-value.is-empty > div{ color: var(--text-3); font-weight: 400; } .record-fields .form-row{ min-width: 0; margin: 0; padding: 7px 10px; border-top: 1px solid var(--row-line); } .record-fields .form-row label{ color: var(--text-3); } .record-fields .form-row input, .record-fields .form-row select, .record-fields .form-row textarea{ background: var(--panel); } .record-fields .mall-readonly-field{ align-self:stretch; } /* Mall classification tags share the site tag shape; region text stays complete. */ .mall-record-table .value-tag{ border-color:color-mix(in srgb,var(--mall-tag-color, var(--accent)) 28%,var(--border)); background:color-mix(in srgb,var(--mall-tag-color, var(--accent)) 10%,var(--panel)); color:color-mix(in srgb,var(--mall-tag-color, var(--accent)) 78%,var(--text)); } .mall-record-table .value-tag{ margin:1px 3px 1px 0; min-height:21px; padding:2px 7px; white-space:nowrap; } .mall-record-table td:has(.value-tag){ overflow:visible; text-overflow:clip; } .mall-boolean-select{ width:100%; min-width:0; } .precision-date-control{ position:relative; min-width:0; } #panel .precision-date-control .precision-date-input{ width:100%; box-sizing:border-box; padding-right:38px; cursor:pointer; font-variant-numeric:tabular-nums; } .precision-date-toggle{ position:absolute; right:4px; top:3px; display:grid; place-items:center; width:30px; height:30px; padding:6px; border:0; border-radius:8px; background:transparent; color:var(--text-2); cursor:pointer; } .precision-date-toggle:hover{ background:var(--accent-soft); color:var(--accent); } .precision-date-toggle svg{ width:18px; height:18px; } .precision-date-popover{ position:fixed; inset:auto; margin:0; box-sizing:border-box; padding:12px; max-width:calc(100vw - 24px); border:1px solid var(--border); border-radius:12px; background:var(--precision-date-surface,#fff); color:var(--text); box-shadow:0 12px 36px rgba(30,58,91,.18); font-family:inherit; } [data-theme="b"] .precision-date-popover{ --precision-date-surface:#162033; } .precision-date-popover header{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:10px; } .precision-date-popover button{ border:0; border-radius:8px; background:transparent; color:var(--text-2); font:inherit; font-size:12px; cursor:pointer; } .precision-date-popover button:hover{ color:var(--accent); background:var(--accent-soft); } .precision-date-popover header > button{ width:28px; height:28px; font-size:20px; } .precision-date-heading{ display:flex; align-items:center; gap:4px; } .precision-date-popover .precision-date-heading button{ padding:6px 8px; font-weight:600; } .precision-date-popover [hidden]{ display:none; } .precision-date-grid{ display:grid; gap:4px; } .precision-date-years, .precision-date-months{ grid-template-columns:repeat(3,minmax(0,1fr)); } .precision-date-days{ grid-template-columns:repeat(7,minmax(0,1fr)); } .precision-date-popover .precision-date-grid button{ height:34px; font-variant-numeric:tabular-nums; } .precision-date-days > span{ min-height:22px; text-align:center; font-size:11px; color:var(--text-3); } .precision-date-popover .precision-date-grid button.selected{ background:var(--accent); color:#fff; font-weight:600; } .precision-date-popover footer{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); } .precision-date-popover footer button{ padding:6px 9px; color:var(--accent); } .precision-date-popover button:focus-visible, .precision-date-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .mall-readonly-empty{ color:var(--text-3); font-size:12px; } .record-geo-section{ display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr); column-gap: 16px; } .record-geo-section > .record-section-title{ grid-column: 1 / -1; } .record-geo-section > .record-fields{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; } .record-geo-section .record-value.wide, .record-geo-section .record-value.span-2{ grid-column: span 2; } .record-geo-map{ min-height: 236px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--hover) 72%, var(--panel)); } /* ========== dashboard ========== */ .geo-map-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 7px 9px 7px 12px; border-bottom: 1px solid var(--row-line); background: var(--panel); } .geo-map-head > div{ display: flex; align-items: center; gap: 7px; }.geo-map-label{ color: var(--text); font-size: 12px; font-weight: 650; } .geo-status{ display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font-size: 10px; white-space: nowrap; }.geo-status::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .geo-status.original{ background: #edf1f5; color: #6f7f8e; }.geo-status.verified{ background: #e7f6f0; color: #238064; }.geo-status.pending{ background: #fff3dd; color: #aa6a08; }.geo-status.missing{ background: #f3f4f6; color: #8d98a3; } .geo-map-canvas{ height: 163px; background: #e8edf1; }.geo-map-foot{ height: 28px; display: flex; align-items: center; padding: 0 11px; border-top: 1px solid var(--row-line); background: var(--panel); color: var(--text-3); font-size: 10px; } .geo-map-loading, .geo-map-unconfigured{ height: 100%; min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 20px; color: var(--text-3); font-size: 11px; text-align: center; }.geo-map-unconfigured b{ color: var(--text-2); font-size: 12px; } .geo-correction-drawer{ --geo-surface:#fff; --geo-muted:color-mix(in srgb, var(--site-card-muted, var(--input-bg)) 100%, var(--panel)); --geo-control:color-mix(in srgb, var(--site-control, var(--input-bg)) 100%, var(--panel)); --geo-line:var(--site-line, var(--border)); position: fixed; inset: 0; z-index: 80; }.geo-correction-mask{ position: absolute; inset: 0; background: var(--mask-bg, rgba(20, 35, 49, .36)); backdrop-filter: blur(2px); } /* Coordinate correction: one workspace, with independent content scrolling. */ .geo-correction-panel{ --geo-padding:22px; position:absolute; top:0; right:0; display:flex; flex-direction:column; width:min(980px,96vw); height:100%; overflow:hidden; box-sizing:border-box; color:var(--text); border-left:1px solid var(--geo-line); background:var(--geo-surface); box-shadow:-16px 0 44px rgba(25,48,69,.18); } [data-theme="b"] .geo-correction-drawer{ --geo-surface:#0e1626; } [data-appearance="macos27"] .geo-correction-drawer{ --geo-surface:#f1f7fd; } .geo-correction-head{ display:flex; flex:none; align-items:center; justify-content:space-between; gap:16px; padding:20px var(--geo-padding) 16px; border-bottom:1px solid var(--geo-line); } .geo-correction-head > div{ min-width:0; } .geo-correction-head h3{ margin:0; color:var(--text); font-size:18px; font-weight:650; line-height:1.35; } .geo-correction-head span{ display:block; margin-top:5px; color:var(--text-2); font-size:12px; line-height:1.5; } .geo-close{ flex:none; width:30px; height:30px; border:0; border-radius:8px; background:var(--geo-muted); color:var(--text-2); font-size:20px; cursor:pointer; } .geo-correction-body{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px var(--geo-padding) 22px; scrollbar-gutter:stable; } .geo-correction-workspace{ display:grid; grid-template-columns:minmax(0,1.28fr) minmax(310px,1fr); gap:20px; align-items:stretch; padding:14px; border:1px solid var(--geo-line); border-radius:16px; background:color-mix(in srgb, var(--geo-muted) 60%, var(--geo-surface)); } .geo-correction-map{ width:100%; min-width:0; min-height:clamp(340px,45vh,440px); overflow:hidden; border:1px solid var(--geo-line); border-radius:12px; background:var(--geo-muted); } .geo-correction-controls{ min-width:0; text-align:left; } .geo-record-context > span{ display:block; color:var(--text-2); font-size:11px; line-height:1.5; } .geo-record-context > strong{ display:block; margin-top:4px; color:var(--text); font-size:14px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; } .geo-original-address{ min-width:0; margin-top:10px; } .geo-original-address > span{ display:block; color:var(--text-2); font-size:11px; line-height:1.5; } .geo-original-address > p{ margin:4px 0 0; color:var(--text); font-size:12px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; cursor:text; } .geo-correction-summary{ display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:12px; margin:12px 0 0; padding-bottom:14px; border-bottom:1px solid var(--geo-line); } .geo-correction-summary span, .geo-correction-summary b{ display:block; font-size:11px; line-height:1.5; } .geo-correction-summary span{ color:var(--text-2); } .geo-correction-summary b{ margin-top:4px; color:var(--text); font-weight:550; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .geo-search, .geo-note{ display:block; margin-top:14px; color:var(--text-2); font-size:12px; line-height:1.5; } .geo-search > div{ display:flex; gap:8px; margin-top:6px; } .geo-search input, .geo-coordinates input, .geo-note textarea{ box-sizing:border-box; min-width:0; width:100%; padding:8px 10px; border:1px solid var(--geo-line); border-radius:8px; outline:0; background:var(--geo-control); color:var(--text); font:inherit; font-size:12px; line-height:1.5; } .geo-search input:focus, .geo-coordinates input:focus, .geo-note textarea:focus{ border-color:var(--accent); } .geo-search .btn{ flex:none; } .geo-poi-results{ display:grid; gap:6px; max-height:128px; overflow-y:auto; margin-top:6px; color:var(--text-2); font-size:11px; line-height:1.5; } .geo-poi-results button{ padding:8px; border:1px solid var(--geo-line); border-radius:8px; background:var(--geo-surface); color:var(--text-2); text-align:left; cursor:pointer; } .geo-poi-results button:hover{ border-color:var(--accent); background:var(--accent-soft); } .geo-poi-results b, .geo-poi-results span{ display:block; } .geo-poi-results span{ margin-top:2px; color:var(--text-3); } .geo-coordinates{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; } .geo-coordinates label{ min-width:0; color:var(--text-2); font-size:12px; line-height:1.5; } .geo-coordinates input{ display:block; margin-top:6px; font-variant-numeric:tabular-nums; } .geo-offset{ margin-top:6px; color:var(--accent); font-size:11px; line-height:1.5; } .geo-note textarea{ display:block; margin-top:6px; resize:vertical; } .geo-correction-actions{ display:flex; flex:none; justify-content:flex-end; flex-wrap:wrap; gap:8px; padding:14px var(--geo-padding); border-top:1px solid var(--geo-line); background:var(--geo-surface); } .geo-location-review{ margin-top:16px; padding-top:16px; border-top:1px solid var(--geo-line); font-size:12px; color:var(--text-2); } .geo-location-review header{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; } .geo-location-review h4{ margin:0; font-size:14px; color:var(--text); } .geo-location-review header > span, .geo-parsed-reference{ color:var(--text-3); font-size:11px; } .geo-resolve-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; } .geo-resolve-toolbar .btn{ flex:none; } #geoResolveStatus{ color:var(--accent); line-height:1.6; } .geo-diff-table{ margin:12px 0; border:1px solid var(--geo-line); border-radius:12px; overflow:hidden; } .geo-diff-head, .geo-diff-row{ display:grid; grid-template-columns:80px minmax(0,1fr) minmax(0,1fr); } .geo-diff-head{ background:var(--geo-muted); color:var(--text-3); font-weight:600; } .geo-diff-head > span, .geo-diff-row > span{ padding:10px; overflow-wrap:anywhere; } .geo-diff-row{ border-top:1px solid var(--geo-line); line-height:1.6; } .geo-diff-row.is-changed > span:last-child{ color:var(--accent-strong); background:color-mix(in srgb, var(--accent) 10%, var(--geo-surface)); box-shadow:inset 3px 0 0 var(--accent); font-weight:600; } .geo-diff-row.is-changed > span:first-child{ color:var(--accent-strong); font-weight:600; } .geo-final-address{ display:block; font-weight:600; } #geoAddressEdited{ display:inline-block; margin-left:8px; color:var(--accent); font-size:11px; font-weight:500; white-space:nowrap; vertical-align:baseline; } #geoAddressEdited:empty{ display:none; } .geo-final-address textarea{ display:block; box-sizing:border-box; width:100%; margin-top:8px; padding:10px; border:1px solid var(--geo-line); border-radius:8px; background:var(--geo-control); color:var(--text); font:inherit; font-weight:400; resize:vertical; } .geo-parsed-reference{ margin-top:10px; padding:10px; background:var(--geo-muted); border-radius:8px; } .geo-parsed-reference p{ margin:6px 0; line-height:1.6; } #geoAddressConflict{ margin-top:10px; padding:10px; border:1px solid var(--accent); border-radius:8px; } #geoAddressConflict > span{ display:block; margin-bottom:8px; } @media (max-width: 1100px) { .record-fields{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .record-value.wide, .record-fields .form-row.wide{ grid-column: span 2; } } @media (max-width:720px) { .geo-correction-panel{ --geo-padding:14px; width:100vw; } .geo-correction-workspace{ grid-template-columns:minmax(0,1fr); gap:16px; padding:12px; } .geo-correction-map{ min-height:0; height:clamp(250px,46vh,400px); } .geo-correction-summary{ grid-template-columns:minmax(0,1fr) max-content; } .geo-location-review header{ align-items:flex-start; } .geo-resolve-toolbar{ align-items:flex-start; } } @media (max-width: 900px) { .record-geo-section{ grid-template-columns: 1fr; }.record-geo-section > .record-section-title{ grid-column: 1; }.record-geo-map{ margin-top: 10px; } } @media (max-width: 640px) { .record-page{ padding: 16px; } .record-page-head{ flex-direction: column; } .record-fields{ grid-template-columns: 1fr; } .record-value.wide, .record-value.span-2, .record-fields .form-row.wide, .record-fields .form-row.span-2{ grid-column: span 1; } } @media (max-width: 1100px) { .dashboard-domain-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .coverage-summary-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .coverage-chart{ grid-column: 1 / -1; padding: 8px 4px 0; border-top: 1px solid var(--row-line); } .quality-kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .quality-detail-grid{ grid-template-columns: 1fr; } } @media (max-width: 640px) { .quality-trend-toolbar{ align-items: flex-start; flex-direction: column; } .quality-period-switch{ width: 100%; } .quality-period-switch button{ flex: 1; } .quality-kpi-grid{ grid-template-columns: 1fr 1fr; } .quality-domain-row{ grid-template-columns: minmax(100px, .9fr) minmax(90px, 1fr) 44px 42px; gap: 6px; } } @media (max-width: 900px) { .dashboard-domain-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-drawer{ width: 82%; } } .toolbar{ display: flex; align-items: center; gap: 12px; } .toolbar-title{ font-size: 16px; font-weight: 500; letter-spacing: 0.2px; } .toolbar-actions{ margin-left: auto; display: flex; gap: 8px; } /* 回收站 */ .recycle-bin-nav-row .node-icon{ color: var(--text-3); }.recycle-bin-nav-row.selected .node-icon{ color: inherit; } .recycle-page{ padding: 17px 18px 22px; }.recycle-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--row-line); }.recycle-head h2{ margin: 0; font-size: 18px; }.recycle-head p{ margin: 5px 0 0; color: var(--text-3); font-size: 12px; }.recycle-retention{ padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 10px; } .recycle-toolbar{ display: flex; align-items: center; gap: 7px; padding: 12px 0; }.recycle-toolbar select{ min-width: 126px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text-2); font: inherit; font-size: 11px; }.recycle-toolbar > span{ color: var(--text-3); font-size: 11px; }.recycle-toolbar .spacer{ flex: 1; } .recycle-table-wrap{ overflow: auto; border: 1px solid var(--border); border-radius: 12px; }.recycle-table{ width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }.recycle-table th, .recycle-table td{ padding: 9px 10px; border-bottom: 1px solid var(--row-line); color: var(--text-2); text-align: left; vertical-align: middle; }.recycle-table th{ background: var(--thead-bg); color: var(--thead-text); font-size: 11px; font-weight: 600; }.recycle-table tr:last-child td{ border-bottom: 0; }.recycle-table th:first-child, .recycle-table td:first-child{ width: 38px; text-align: center; }.recycle-table th:nth-child(2){ width: 25%; }.recycle-table th:nth-child(3){ width: 14%; }.recycle-table th:nth-child(4){ width: 10%; }.recycle-table th:nth-child(5){ width: 9%; }.recycle-table th:nth-child(6){ width: 16%; }.recycle-table th:nth-child(7){ width: 10%; }.recycle-table th:last-child{ width: 120px; }.recycle-table td b, .recycle-table td small{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.recycle-table td b{ color: var(--text); font-size: 12px; font-weight: 600; }.recycle-table td small{ margin-top: 3px; color: var(--text-3); font-size: 10px; }.recycle-dataset{ display: inline-flex; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--accent-soft) 62%, var(--panel)); color: var(--text-2); font-size: 10px; } .recycle-empty{ min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-3); text-align: center; }.recycle-empty > span{ font-size: 34px; opacity: .45; }.recycle-empty b{ margin-top: 8px; color: var(--text-2); font-size: 14px; }.recycle-empty p{ margin: 5px 0 0; font-size: 11px; } @media (max-width: 720px) { .recycle-page{ padding: 14px; }.recycle-toolbar{ flex-wrap: wrap; }.recycle-toolbar .spacer{ display: none; width: 100%; }.recycle-table{ min-width: 850px; } } /* 数据操作日志 */ .operation-log-page{ padding: 17px 18px 22px; } .operation-log-toolbar{ display: flex; align-items: center; gap: 7px; padding: 12px 0; } .operation-log-toolbar input{ width: min(260px, 30vw); min-width: 120px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); font: inherit; font-size: 11px; } .operation-log-toolbar select{ min-width: 100px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text-2); font: inherit; font-size: 11px; } .operation-log-toolbar .btn{ flex-shrink: 0; white-space: nowrap; } .log-total{ flex-shrink: 0; margin-left: auto; color: var(--text-3); font-size: 11px; white-space: nowrap; } .operation-log-list{ overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); } .operation-log-item{ border-bottom: 1px solid var(--row-line); } .operation-log-item:last-child{ border-bottom: 0; } .operation-log-item summary{ display: grid; grid-template-columns: 48px minmax(160px, 1fr) 90px 142px 70px 18px; align-items: center; gap: 10px; min-height: 45px; padding: 0 12px; cursor: pointer; list-style: none; color: var(--text-2); font-size: 11px; } .operation-log-item summary::-webkit-details-marker{ display: none; } .operation-log-item summary:hover{ background: var(--hover); } .operation-log-item summary > b{ overflow: hidden; color: var(--text); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .log-action{ display: inline-flex; justify-content: center; padding: 3px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; } .log-dataset{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .log-time, .log-operator{ color: var(--text-3); } .log-chevron{ color: var(--text-3); font-size: 14px; transition: transform .18s ease; } .operation-log-item[open] .log-chevron{ transform: rotate(180deg); } .operation-log-detail{ padding: 11px 12px 14px 70px; border-top: 1px solid var(--row-line); background: color-mix(in srgb, var(--hover) 50%, var(--panel)); } .log-meta{ display: flex; gap: 16px; margin-bottom: 9px; color: var(--text-3); font-size: 10px; } .log-diff{ overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); } .log-diff-row{ display: grid; grid-template-columns: 140px minmax(0, 1fr) 20px minmax(0, 1fr); align-items: start; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--row-line); font-size: 11px; } .log-diff-row:last-child{ border-bottom: 0; } .log-diff-row b{ color: var(--text-2); font-weight: 600; } .log-diff-row span{ overflow-wrap: anywhere; } .log-diff-row i{ color: var(--text-3); text-align: center; font-style: normal; } .log-old{ color: var(--danger); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 35%, transparent); } .log-new{ color: var(--accent); } .log-snapshot{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); } .log-snapshot > div{ display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; padding: 7px 10px; border-right: 1px solid var(--row-line); border-bottom: 1px solid var(--row-line); font-size: 11px; } .log-snapshot b{ color: var(--text-2); font-weight: 600; } .log-snapshot span{ overflow-wrap: anywhere; color: var(--text); } .log-note{ grid-column: 1 / -1; padding: 7px 10px; background: var(--thead-bg); color: var(--text-3); font-size: 10px; } .mall-fence-badge{ display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; } @media (max-width: 720px) { .operation-log-page{ padding: 14px; }.operation-log-toolbar{ flex-wrap: wrap; }.operation-log-toolbar input{ width: 100%; }.log-total{ margin-left: 0; }.operation-log-item summary{ grid-template-columns: 46px minmax(120px, 1fr) 82px 18px; }.log-time, .log-operator{ display: none; }.operation-log-detail{ padding-left: 12px; }.log-snapshot{ grid-template-columns: 1fr; }.log-diff-row{ grid-template-columns: 90px 1fr; }.log-diff-row i{ display: none; }.log-old, .log-new{ grid-column: 2; } } .panel{ flex: 1; min-height: 0; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); } .panel-empty{ padding: 40px; text-align: center; color: var(--text-3); } table{ width: 100%; border-collapse: collapse; font-size: 13px; } thead th{ position: sticky; top: 0; background: var(--thead-bg); text-align: left; font-weight: 500; color: var(--thead-text); padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; font-size:var(--field-label-size);} tbody td{ padding: 11px 14px; border-bottom: 1px solid var(--row-line); vertical-align: top; } tbody tr:hover{ background: var(--hover); } td.name{ font-weight: 500; color: var(--accent); cursor: pointer; } td.muted{ color: var(--text-3); } .row-actions{ white-space: nowrap; text-align: center; } .settings-table td.row-actions{ text-align: center; } /* 只读角色不显示任何数据维护入口；后端仍会做最终权限校验。 */ body:not(.perm-data-create) #dataCreate, body:not(.perm-data-create) #communityCreate, body:not(.perm-data-create) #scenicCreate, body:not(.perm-data-create) #hotelCreate, body:not(.perm-data-create) #brandLibraryCreate{ display: none !important; } body:not(.perm-data-create) #brandStoreCreate{ display: none !important; } body:not(.perm-data-edit) [id$="RecordEdit"], body:not(.perm-data-edit) [data-data-edit], body:not(.perm-data-edit) [data-community-edit], body:not(.perm-data-edit) [data-city-edit], body:not(.perm-data-edit) [data-scenic-edit], body:not(.perm-data-edit) [data-hotel-edit], body:not(.perm-data-edit) [data-brand-edit], body:not(.perm-data-edit) [data-store-edit], body:not(.perm-data-edit) #editField{ display: none !important; } body:not(.perm-data-delete) [data-data-delete], body:not(.perm-data-delete) [data-community-delete], body:not(.perm-data-delete) [data-scenic-delete], body:not(.perm-data-delete) [data-hotel-delete], body:not(.perm-data-delete) [data-brand-delete], body:not(.perm-data-delete) [data-store-delete], body:not(.perm-data-delete) #delField{ display: none !important; } .link{ color: var(--accent); cursor: pointer; background: none; border: none; font-size: 12px; padding: 2px 6px; } .link:hover{ text-decoration: underline; } .link.danger{ color: var(--danger); } .modal-mask{ position: fixed; inset: 0; background: var(--mask-bg); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal-mask[hidden]{ display: none !important; } .modal{ width: 560px; max-width: 92vw; max-height: 88vh; background: var(--modal-bg); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); } .modal-head{ padding: 16px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); } .modal-location{ display:block; margin-top:3px; color:var(--text-2); font-size:12px; font-weight:400; line-height:1.5; overflow-wrap:anywhere; } .modal-body{ padding: 18px 20px; overflow: auto; } .modal-foot{ padding: 14px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .spacer{ flex: 1; } .form-row{ margin-bottom: 14px; } .form-row label{ display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; } .form-row input, .form-row select, .form-row textarea{ width: 100%; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; outline: none; background: var(--input-bg); color: var(--text); } .form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color: var(--accent); background: var(--panel); } .toast{ position: fixed; top: 18px; left: 50%; transform: translateX(-50%); background: var(--toast-bg); color: var(--toast-text); padding: 9px 16px; border-radius: 8px; font-size: 13px; z-index: 200; box-shadow: 0 4px 14px rgba(0,0,0,.12); } .toast.error{ background: var(--danger); color: #fff; } .toast.success{ background: var(--ok); color: #fff; } .tag{ display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11px; } .tag.section{ background: var(--accent-soft); color: var(--accent); } .tag.domain{ background: var(--accent-soft); color: var(--accent); } .tag.category{ background: var(--accent-soft); color: var(--accent); } .tag.subcategory{ background: var(--amber-soft); color: var(--amber); } .tag.field{ background: var(--hover); color: var(--text-2); } /* 全局交互反馈：悬停过渡 + 按下缩放/透明度（鼠标点击动效） */ .tree-row, .link, .radio, .export-item{ transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, opacity .18s ease; } .link:active{ opacity: 0.7; } .tree-row:active, .export-item:active{ opacity: 0.8; } @media (prefers-reduced-motion: reduce) { .tree-row, .link, .radio, .export-item{ transition: none; } } /* 全部字段（扁平视图） */ .all-toolbar{ display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); } .all-toolbar input{ flex: 0 1 260px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--input-bg); color: var(--text); } .all-toolbar select{ padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--input-bg); color: var(--text); cursor: pointer; } .all-toolbar input:focus, .all-toolbar select:focus{ border-color: var(--accent); } .all-count{ margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; } th.sortable{ cursor: pointer; user-select: none; } th.sortable:hover{ color: var(--accent); } /* 导出数据弹窗 */ .export-info{ font-size: 12px; color: var(--text-3); margin-bottom: 14px; } .radio-group{ display: flex; gap: 18px; } .radio{ display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; } .export-actions{ display: flex; gap: 12px; margin-bottom: 8px; } .export-fields{ max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; } .export-group-title{ font-size: 12px; color: var(--text-2); font-weight: 500; padding: 6px 4px 2px; } .export-group + .export-group{ margin-top: 4px; } .export-item{ display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 13px; color: var(--text); cursor: pointer; border-radius: 8px; } .export-item:hover{ background: var(--hover); } .export-item.disabled{ color: var(--text-3); cursor: not-allowed; } .export-item .tag{ margin-left: auto; } /* 左侧导航栏 */ /* ========== 数据导出中心 ========== */ .nav-item.selected{ background: var(--accent-soft); color: var(--accent); } .nav-item-icon{ flex: none; font-size: 13px; color: var(--text-3); } .nav-item.selected .nav-item-icon{ color: var(--accent); } .nav-item.selected .nav-item-count{ color: var(--accent); } /* 企业蓝白主题：保留紧凑布局，仅替换整站色彩语言 */ [data-theme="f"][data-color-theme="blue"]{ --bg: #f4f7fb; --panel: #ffffff; --border: #e3e9f2; --border-strong: #ccd6e5; --text: #172033; --text-2: #59677c; --text-3: #94a0b2; --accent: #1670f8; --accent-strong: #0d59d5; --accent-soft: rgba(22, 112, 248, .10); --accent-contrast: #ffffff; --amber: #f08a24; --amber-soft: rgba(240, 138, 36, .12); --danger: #d84d57; --danger-soft: rgba(216, 77, 87, .10); --ok: #1670f8; --hover: #f1f6fd; --row-line: #edf1f6; --input-bg: #f9fbfe; --btn-bg: #ffffff; --btn-hover: #f2f6fc; --modal-bg: #ffffff; --thead-bg: #f7f9fc; --thead-text: #718096; --mask-bg: rgba(22, 32, 51, .32); --toast-bg: #172033; --toast-text: #ffffff; } [data-theme="f"][data-color-theme="blue"] .topbar{ border-bottom-color: #e2e8f1; box-shadow: 0 1px 4px rgba(35, 68, 118, .04); } [data-theme="f"][data-color-theme="blue"] .sidebar{ border-right-color: #e2e8f1; } [data-theme="f"][data-color-theme="blue"] .panel{ box-shadow: 0 10px 30px rgba(36, 72, 125, .055); } [data-theme="f"] .governance-nav-row, [data-theme="f"] .quality-governance-nav-row{ min-height:38px; margin-top:5px; padding:8px 9px; border-radius:8px; color:var(--text-2); } [data-theme="f"] .trust-nav-row .node-icon, [data-theme="f"] .governance-nav-row .node-icon, [data-theme="f"] .quality-governance-nav-row .node-icon{ width:auto; height:auto; background:transparent; color:var(--text-3); } [data-theme="f"] .trust-nav-row.expanded .node-icon{ color:var(--text-3); } [data-theme="f"] .trust-nav-row .node-count, [data-theme="f"] .governance-nav-row .node-count, [data-theme="f"] .quality-governance-nav-row .node-count{ min-width:28px; padding:2px 7px; border-radius:999px; background:var(--hover); color:var(--text-3); text-align:center; } [data-theme="f"] .trust-nav-children .domain-nav-row{ min-height:38px; margin:2px 0; padding:6px 9px; border-radius:8px; } [data-theme="f"] .quality-governance-nav-children{ margin-left:0; padding-left:9px; } [data-theme="f"] .quality-governance-group-label{ margin:9px 9px 3px 42px; color:var(--text-3); font-size:10px; font-weight:650; letter-spacing:.08em; } [data-theme="f"] .quality-governance-group-label:first-child{ margin-top:4px; } [data-theme="f"] .quality-governance-nav-children .domain-nav-row{ min-height:38px; margin:2px 0; padding:6px 9px; border-radius:8px; } /* 子功能图标与数据治理、系统功能统一：25px 浅蓝圆角容器 + 主题蓝线性图标。 */ [data-theme="f"] .trust-nav-children .domain-nav-row .node-icon{ display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:12px; } [data-theme="f"] .quality-governance-nav-children .domain-nav-row .node-icon{ display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:12px; } [data-theme="f"][data-color-theme="blue"] input:focus, [data-theme="f"][data-color-theme="blue"] select:focus, [data-theme="f"][data-color-theme="blue"] textarea:focus{ box-shadow: 0 0 0 3px rgba(22, 112, 248, .13); } /* 轻玻璃质感：保留信息密度，只给主要层级增加通透、反光和柔和分离感。 */ [data-theme="f"] .topbar{ background:rgba(255,255,255,.76); border-bottom:1px solid rgba(205,220,237,.78); border-top:1px solid rgba(255,255,255,.92); box-shadow:0 8px 24px rgba(76,112,155,.055); backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%); } [data-theme="f"] .sidebar{ background:rgba(255,255,255,.7); border-right-color:rgba(205,220,237,.72); backdrop-filter:blur(16px) saturate(118%); -webkit-backdrop-filter:blur(16px) saturate(118%); } [data-theme="f"] .content > .panel{ background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(249,252,255,.68)); border-color:rgba(190,210,232,.68); border-top-color:rgba(255,255,255,.94); box-shadow:0 16px 38px rgba(78,116,158,.075), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(14px) saturate(112%); -webkit-backdrop-filter:blur(14px) saturate(112%); } [data-theme="f"] body{ background: radial-gradient(ellipse 720px 360px at 82% -8%, rgba(190,220,255,.24), transparent 68%), radial-gradient(ellipse 520px 300px at 8% 76%, rgba(218,238,255,.16), transparent 72%), #f5f8fc; } [data-theme="f"] input, [data-theme="f"] select, [data-theme="f"] textarea{ box-shadow:inset 0 1px 2px rgba(70,110,150,.035), 0 1px 0 rgba(255,255,255,.82); } /* 字色精修：减少发灰的浅字，让玻璃背景下的层级更有质感。 */ [data-theme="f"]{ --text:#1d2b3b; --text-2:#5d6d80; --text-3:#8798aa; --thead-text:#708397; } [data-theme="f"] .workspace-title strong, [data-theme="f"] .toolbar-title, [data-theme="f"] .dashboard-card-title, [data-theme="f"] .dashboard-card h3{ color:#18283a; } [data-theme="f"] .workspace-title span, [data-theme="f"] .breadcrumb{ color:#718397; } [data-theme="f"] .tree-row .node-name, [data-theme="f"] .domain-nav-row .node-name, [data-theme="f"] .dashboard-card-body{ color:#33475c; } [data-theme="f"] .dashboard-card .field-name, [data-theme="f"] .dashboard-card .category-name{ color:#52677b; } [data-theme="f"] .dashboard-card .field-count, [data-theme="f"] .dashboard-card .category-count{ color:#71869a; } [data-theme="f"] .tree-row .node-count, [data-theme="f"] .dashboard-card small, [data-theme="f"] .dashboard-card .muted{ color:#8799ab; } [data-theme="f"] .search-box input::placeholder, [data-theme="f"] input::placeholder, [data-theme="f"] textarea::placeholder{ color:#98a8b8; opacity:1; } /* Breadcrumb colors; dimensions are shared by both appearances. */ [data-theme="f"] .breadcrumb{ color:#8293a7; } [data-theme="f"] .breadcrumb b{ color:#5c7085; font-weight:550; } [data-theme="f"] .breadcrumb b:last-child{ color:#1d3045; font-weight:700; } [data-theme="f"] .breadcrumb-link{ color:#71859a; font-weight:500; text-decoration:none; } [data-theme="f"] .breadcrumb-link:hover{ color:#1670f8; text-decoration:none; } [data-theme="f"] .breadcrumb-separator{ color:#c1cedb; } /* 数据更新计划：把不固定的更新时间变成对所有使用者可见的轻量日程 */ /* ========== 数据更新计划 ========== */ .delivery-center{ display: grid; gap: 14px; padding: 14px; background: transparent; } .delivery-loading-shell{ min-height: 520px; } .delivery-loading-shell .delivery-hero{ min-height: 116px; } @keyframes delivery-skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .delivery-hero{ display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 116px; padding: 20px 24px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(120deg, var(--panel) 0%, var(--panel) 62%, var(--accent-soft)); overflow: hidden; } .delivery-hero > div{ min-width: 0; } .delivery-hero > div > span{ color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; } .delivery-hero h2{ margin: 7px 0 5px; color: var(--text); font-size: 22px; } .delivery-hero p{ margin: 0; color: var(--text-3); font-size: 10px; line-height: 1.65; } .delivery-hero .btn{ flex: none; } .delivery-create-page{ min-height: 100%; align-content: start; padding-bottom: 0; } .delivery-create-hero{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 18px; padding: 4px 2px 2px; } .delivery-create-hero .link{ align-self: start; padding: 6px 0; color: var(--text-3); font-size: 10px; white-space: nowrap; } .delivery-create-hero .link:hover{ color: var(--accent); } .delivery-create-hero > div{ min-width: 0; } .delivery-create-hero > div > span{ color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; } .delivery-create-hero h2{ margin: 6px 0 4px; color: var(--text); font-size: 22px; } .delivery-create-hero p{ margin: 0; color: var(--text-3); font-size: 10px; line-height: 1.65; } .delivery-create-page .delivery-builder{ overflow: clip; box-shadow: 0 8px 28px rgba(24, 54, 105, .06); } .delivery-create-page .delivery-builder-grid{ min-height: 0; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } .delivery-create-page .delivery-builder-head{ padding: 20px 26px; } .delivery-create-page .delivery-builder-head span{ font-size: 10px; } .delivery-create-page .delivery-builder-head h3{ font-size: 18px; } .delivery-create-page .delivery-form-main{ padding: 26px 28px 32px; } .delivery-create-page .delivery-config{ padding: 22px 22px 24px; } .delivery-create-page .delivery-step{ gap: 11px; margin-bottom: 16px; } .delivery-create-page .delivery-step > i{ flex-basis: 30px; width: 30px; height: 30px; border-radius: 8px; font-size: 12px; } .delivery-create-page .delivery-step b{ font-size: 14px; } .delivery-create-page .delivery-step p{ margin-top: 5px; font-size: 11px; } .delivery-create-page .delivery-domain-tabs{ gap: 10px; margin-bottom: 18px; } .delivery-create-page .delivery-domain-tabs button, .delivery-create-page .delivery-template-tabs button{ gap: 5px; padding: 13px 14px; border-radius: 8px; } .delivery-create-page .delivery-domain-tabs b, .delivery-create-page .delivery-template-tabs b{ font-size: 13px; } .delivery-create-page .delivery-domain-tabs small, .delivery-create-page .delivery-template-tabs small{ font-size: 11px; } .delivery-create-page .delivery-filters{ gap: 12px; margin-bottom: 22px; padding: 14px; } .delivery-create-page .delivery-filters label, .delivery-create-page .delivery-config > label{ gap: 7px; font-size: 12px; } .delivery-create-page .delivery-filters select, .delivery-create-page .delivery-config input, .delivery-create-page .delivery-config select, .delivery-create-page .delivery-config textarea{ padding: 8px 10px; border-radius: 8px; font-size: 13px; } .delivery-create-page .delivery-filters select, .delivery-create-page .delivery-config input, .delivery-create-page .delivery-config select{ height: 38px; } .delivery-create-page .delivery-template-tabs{ gap: 10px; margin-bottom: 16px; } .delivery-create-page .delivery-fields{ gap: 12px; max-height: 390px; } .delivery-create-page .delivery-fields > div{ padding: 13px; border-radius: 8px; } .delivery-create-page .delivery-fields h4{ margin-bottom: 9px; font-size: 12px; } .delivery-create-page .delivery-fields h4 span{ font-size: 10px; } .delivery-create-page .delivery-fields label{ gap: 7px; padding: 6px 2px; font-size: 12px; } .delivery-create-page .delivery-fields label em{ font-size: 9px; } .delivery-create-page .delivery-config > label{ margin-bottom: 16px; } .delivery-create-page .delivery-security-note{ margin: 18px 0; padding: 13px; } .delivery-create-page .delivery-security-note b{ font-size: 12px; } .delivery-create-page .delivery-security-note p{ margin-top: 7px; font-size: 11px; } .delivery-create-page .delivery-config > .btn{ margin-top: 10px; } .delivery-create-page .delivery-preview-result{ margin-top: 15px; padding: 13px 2px; } .delivery-create-page .delivery-preview-result b, .delivery-create-page .delivery-preview-result span{ font-size: 13px; } .delivery-create-page .delivery-preview-result p{ margin-top: 7px; font-size: 11px; } .delivery-records .delivery-section-head h3{ font-size: 16px; } .delivery-records .delivery-section-head p{ font-size: 11px; } .delivery-records .delivery-table-row{ padding-block: 14px; } .delivery-records .delivery-table-row b{ font-size: 11px; } .delivery-records .delivery-table-row small, .delivery-records .delivery-table-row.head{ font-size: 10px; } .delivery-readonly{ padding: 5px 9px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 9px; } .delivery-kpis{ display: grid; grid-template-columns: repeat(3, minmax(125px, .65fr)) minmax(240px, 1.35fr); border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; } .delivery-kpis > div{ min-width: 0; padding: 14px 17px; border-right: 1px solid var(--row-line); } .delivery-kpis > div:last-child{ border-right: 0; } .delivery-kpis small{ display: block; color: var(--text-3); font-size: 9px; } .delivery-kpis b{ display: block; margin: 5px 0 3px; color: var(--text); font-size: 18px; } .delivery-kpis span{ color: var(--text-3); font-size: 9px; } .delivery-security{ display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--accent-soft) 32%, var(--panel)); } .delivery-security > span{ display: grid; flex: 0 0 35px; width: 35px; height: 35px; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); } .delivery-security svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .delivery-security p{ margin: 0; } .delivery-security p b{ margin: 0 0 4px; font-size: 10px; } .delivery-security p small{ font-size: 9px; } .delivery-builder, .delivery-records{ overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); } .delivery-builder[hidden]{ display: none; } .delivery-builder-head, .delivery-section-head{ display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border-bottom: 1px solid var(--row-line); } .delivery-builder-head span{ color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: 1.3px; } .delivery-builder-head h3, .delivery-section-head h3{ margin: 4px 0 0; color: var(--text); font-size: 13px; } .delivery-section-head p{ margin: 4px 0 0; color: var(--text-3); font-size: 9px; } .delivery-section-head > span{ color: var(--text-3); font-size: 9px; } .delivery-builder-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 260px; } .delivery-form-main{ min-width: 0; padding: 17px 18px; border-right: 1px solid var(--row-line); } .delivery-config{ padding: 17px; background: var(--input-bg); } .delivery-step{ display: flex; align-items: center; gap: 9px; margin-bottom: 11px; } .delivery-step > i{ display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; border-radius: 8px; background: var(--accent); color: #fff; font-size: 9px; font-style: normal; font-weight: 700; } .delivery-step b{ display: block; color: var(--text); font-size: 11px; } .delivery-step p{ margin: 3px 0 0; color: var(--text-3); font-size: 9px; } .delivery-domain-tabs{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; } .delivery-domain-tabs button, .delivery-template-tabs button{ display: grid; gap: 3px; min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; text-align: left; } .delivery-domain-tabs button:hover, .delivery-template-tabs button:hover{ border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } .delivery-domain-tabs button.active, .delivery-template-tabs button.active{ border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); background: var(--accent-soft); color: var(--accent); } .delivery-domain-tabs b, .delivery-template-tabs b{ overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .delivery-domain-tabs small, .delivery-template-tabs small{ overflow: hidden; color: var(--text-3); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .delivery-filters{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-bottom: 16px; padding: 10px; border: 1px solid var(--row-line); border-radius: 8px; background: var(--input-bg); } .delivery-filters label, .delivery-config > label{ display: grid; gap: 5px; min-width: 0; color: var(--text-3); font-size: 9px; } .delivery-filters p{ grid-column: 1 / -1; margin: 0; color: var(--text-3); font-size: 9px; } .delivery-filters select, .delivery-config input, .delivery-config select, .delivery-config textarea{ width: 100%; min-width: 0; padding: 5px 7px; border: 1px solid var(--border); border-radius: 8px; outline: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 9px; } .delivery-filters select, .delivery-config input, .delivery-config select{ height: 30px; } .delivery-config textarea{ resize: vertical; line-height: 1.5; } .delivery-filters select:focus, .delivery-config input:focus, .delivery-config select:focus, .delivery-config textarea:focus{ border-color: var(--accent); } .delivery-template-tabs{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; } .delivery-fields{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 260px; overflow: auto; } .delivery-fields > div{ align-content: start; min-width: 0; padding: 9px; border: 1px solid var(--row-line); border-radius: 8px; } .delivery-fields h4{ display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; color: var(--text-2); font-size: 9px; } .delivery-fields h4 span{ color: var(--text-3); font-size: 9px; } .delivery-fields label{ display: flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 2px; color: var(--text-2); font-size: 9px; cursor: pointer; } .delivery-fields label input{ flex: none; margin: 0; accent-color: var(--accent); } .delivery-fields label span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .delivery-fields label em{ flex: none; margin-left: auto; padding: 2px 4px; border-radius: 4px; background: var(--amber-soft); color: var(--amber); font-size: 6px; font-style: normal; } .delivery-config > label{ margin-bottom: 10px; } .delivery-security-note{ margin: 12px 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 8px; background: var(--accent-soft); } .delivery-security-note b{ color: var(--accent); font-size: 9px; } .delivery-security-note p{ margin: 5px 0 0; color: var(--text-2); font-size: 9px; line-height: 1.6; } .delivery-config > .btn{ width: 100%; margin-top: 7px; } .delivery-preview-result{ margin-top: 11px; padding: 10px; border-top: 1px solid var(--row-line); } .delivery-preview-result b, .delivery-preview-result span{ color: var(--text); font-size: 10px; } .delivery-preview-result p{ margin: 5px 0 0; color: var(--text-3); font-size: 9px; line-height: 1.55; } .delivery-table{ overflow-x: auto; } .delivery-tabs{ display: flex; gap: 3px; padding: 9px 13px 0; border-bottom: 1px solid var(--row-line); } .delivery-tabs button{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-3); font: inherit; font-size: 9px; cursor: pointer; } .delivery-tabs button.active{ border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; } .delivery-tabs button span{ min-width: 16px; padding: 2px 4px; border-radius: 8px; background: var(--input-bg); color: inherit; font-size: 9px; text-align: center; } .delivery-table-row{ display: grid; grid-template-columns: 1.2fr 1.25fr .85fr .8fr .62fr 64px; align-items: center; gap: 12px; min-width: 850px; padding: 11px 17px; border-bottom: 1px solid var(--row-line); } .delivery-table-row:last-child{ border-bottom: 0; } .delivery-table-row:not(.head):hover{ background: var(--hover); } .delivery-table-row.head{ padding-block: 8px; background: var(--thead-bg); color: var(--text-3); font-size: 9px; } .delivery-table-row > div{ display: grid; gap: 4px; min-width: 0; } .delivery-table-row b{ overflow: hidden; color: var(--text); font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .delivery-table-row small{ overflow: hidden; color: var(--text-3); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .delivery-status{ width: fit-content; padding: 3px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 9px; } .delivery-status.ready{ background: color-mix(in srgb, var(--ok) 11%, transparent); color: var(--ok); } .delivery-status.expired{ background: var(--danger-soft); color: var(--danger); } .delivery-status.pending, .delivery-status.reviewing{ background: var(--amber-soft); color: var(--amber); } .delivery-status.returned{ background: color-mix(in srgb, #8a6de9 12%, transparent); color: #7655d4; } .delivery-status.rejected, .delivery-status.withdrawn{ background: var(--danger-soft); color: var(--danger); } .delivery-risk{ width: fit-content; padding: 3px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 9px; } .delivery-risk.sensitive{ background: var(--amber-soft); color: var(--amber); } .delivery-risk.high{ background: var(--danger-soft); color: var(--danger); } .delivery-row-actions{ display: flex !important; grid-auto-flow: column; align-items: center; justify-content: flex-start; gap: 4px !important; } .delivery-row-actions .btn, .delivery-row-actions .link{ padding: 5px 7px; font-size: 9px; white-space: nowrap; } .delivery-empty{ display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 120px; color: var(--text-3); } .delivery-empty > span{ display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 10px; } .delivery-empty b{ color: var(--text); font-size: 10px; } .delivery-empty p{ margin: 4px 0 0; font-size: 9px; } .delivery-review-mask{ position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: var(--mask-bg); } .delivery-review-dialog{ width: min(650px, 94vw); max-height: 88vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); box-shadow: 0 24px 70px rgba(24, 54, 105, .22); } .delivery-review-dialog > header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 17px 19px; border-bottom: 1px solid var(--row-line); } .delivery-review-dialog header span{ color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; } .delivery-review-dialog header h3{ margin: 5px 0 3px; color: var(--text); font-size: 14px; } .delivery-review-dialog header p{ margin: 0; color: var(--text-3); font-size: 9px; } .delivery-review-dialog header > button{ border: 0; background: none; color: var(--text-3); font-size: 18px; cursor: pointer; } .delivery-review-summary{ display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--row-line); } .delivery-review-summary > div{ padding: 12px 15px; border-right: 1px solid var(--row-line); } .delivery-review-summary > div:last-child{ border-right: 0; } .delivery-review-summary small{ display: block; margin-bottom: 5px; color: var(--text-3); font-size: 9px; } .delivery-review-summary b{ color: var(--text); font-size: 9px; } .delivery-review-dialog > section{ padding: 13px 19px; border-bottom: 1px solid var(--row-line); } .delivery-review-dialog section h4{ margin: 0 0 7px; color: var(--text); font-size: 9px; } .delivery-review-dialog section > p{ margin: 0; color: var(--text-2); font-size: 9px; line-height: 1.6; } .delivery-approval-flow{ display: flex; gap: 5px; } .delivery-approval-flow > div{ display: flex; flex: 1; align-items: center; gap: 7px; min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); } .delivery-approval-flow i{ display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border-radius: 8px; background: var(--border); color: var(--text-3); font-size: 9px; font-style: normal; } .delivery-approval-flow .approved i{ background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } .delivery-approval-flow .pending{ border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: var(--accent-soft); } .delivery-approval-flow .pending i{ background: var(--accent); color: #fff; } .delivery-approval-flow span{ display: grid; gap: 3px; min-width: 0; } .delivery-approval-flow b{ color: var(--text); font-size: 9px; } .delivery-approval-flow small{ overflow: hidden; color: var(--text-3); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .delivery-review-comment{ display: grid; gap: 6px; padding: 13px 19px; color: var(--text-2); font-size: 9px; } .delivery-review-comment textarea{ padding: 8px; border: 1px solid var(--border); border-radius: 8px; outline: 0; resize: vertical; background: var(--input-bg); color: var(--text); font: inherit; font-size: 9px; } .delivery-review-comment textarea:focus{ border-color: var(--accent); } .delivery-review-dialog > footer{ display: flex; align-items: center; gap: 7px; padding: 13px 19px; border-top: 1px solid var(--row-line); } .delivery-review-dialog footer > span{ flex: 1; } @media (max-width: 900px) { .delivery-kpis{ grid-template-columns: repeat(3, 1fr); }.delivery-security{ grid-column: 1 / -1; }.delivery-builder-grid{ grid-template-columns: 1fr; }.delivery-form-main{ border-right: 0; border-bottom: 1px solid var(--row-line); }.delivery-domain-tabs, .delivery-filters{ grid-template-columns: repeat(3, 1fr); }.delivery-fields{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .delivery-center{ padding: 10px; }.delivery-hero{ align-items: flex-start; flex-direction: column; }.delivery-create-hero{ grid-template-columns: 1fr; gap: 6px; }.delivery-kpis{ grid-template-columns: repeat(3, 1fr); }.delivery-domain-tabs, .delivery-filters, .delivery-fields{ grid-template-columns: 1fr 1fr; } } /* 新建交付申请：独立页面采用纵向三步流程，字号回归常规表单尺度；头部沿用全局卡片式 hero 视觉。 */ .delivery-create-page .delivery-create-hero{ display: block; padding: 20px 24px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(120deg, var(--panel) 0%, var(--panel) 62%, var(--accent-soft)); overflow: hidden; } .delivery-create-page .delivery-back-button{ display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text-2); font: inherit; font-size: 11px; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; } .delivery-create-page .delivery-back-button span{ color: var(--accent); font-size: 14px; line-height: 1; } .delivery-create-page .delivery-back-button:hover{ border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); color: var(--accent); } .delivery-create-page .delivery-create-hero h2{ margin: 5px 0 4px; font-size: 20px; } .delivery-create-page .delivery-create-hero p{ font-size: 11px; } .delivery-create-page .delivery-builder-grid.delivery-builder-flow{ display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } .delivery-create-page .delivery-builder-flow .delivery-form-main{ padding: 22px 26px 26px; border-right: 1px solid var(--row-line); border-bottom: 0; } .delivery-create-page .delivery-builder-flow .delivery-config{ position: static; align-self: start; max-height: none; overflow: visible; padding: 22px 22px 24px; background: var(--input-bg); scrollbar-width: thin; } .delivery-create-page .delivery-builder-flow .delivery-step{ gap: 10px; margin-bottom: 13px; } .delivery-create-page .delivery-builder-flow .delivery-step > i{ flex-basis: 28px; width: 28px; height: 28px; font-size: 11px; } .delivery-create-page .delivery-builder-flow .delivery-step b{ font-size: 14px; } .delivery-create-page .delivery-builder-flow .delivery-step p{ margin-top: 4px; font-size: 10px; } .delivery-create-page .delivery-builder-flow .delivery-domain-tabs{ gap: 8px; margin-bottom: 15px; } .delivery-create-page .delivery-builder-flow .delivery-domain-tabs button, .delivery-create-page .delivery-builder-flow .delivery-template-tabs button{ padding: 10px 12px; } .delivery-create-page .delivery-builder-flow .delivery-domain-tabs b, .delivery-create-page .delivery-builder-flow .delivery-template-tabs b{ font-size: 12px; } .delivery-create-page .delivery-builder-flow .delivery-domain-tabs small, .delivery-create-page .delivery-builder-flow .delivery-template-tabs small{ font-size: 10px; } .delivery-create-page .delivery-builder-flow .delivery-filters{ gap: 9px; margin-bottom: 19px; padding: 11px; } .delivery-create-page .delivery-builder-flow .delivery-filters label, .delivery-create-page .delivery-builder-flow .delivery-config > label{ gap: 6px; font-size: 11px; } .delivery-create-page .delivery-builder-flow .delivery-filters select, .delivery-create-page .delivery-builder-flow .delivery-config input, .delivery-create-page .delivery-builder-flow .delivery-config select, .delivery-create-page .delivery-builder-flow .delivery-config textarea{ padding: 7px 9px; font-size: 12px; } .delivery-create-page .delivery-builder-flow .delivery-filters select, .delivery-create-page .delivery-builder-flow .delivery-config input, .delivery-create-page .delivery-builder-flow .delivery-config select{ height: 34px; } .delivery-create-page .delivery-builder-flow .delivery-template-tabs{ gap: 8px; margin-bottom: 13px; } .delivery-create-page .delivery-builder-flow .delivery-fields{ gap: 9px; max-height: 330px; } .delivery-create-page .delivery-builder-flow .delivery-fields > div{ padding: 11px; } .delivery-create-page .delivery-builder-flow .delivery-fields h4{ margin-bottom: 7px; font-size: 11px; } .delivery-create-page .delivery-builder-flow .delivery-fields h4 span{ font-size: 9px; } .delivery-create-page .delivery-builder-flow .delivery-fields label{ gap: 6px; padding: 5px 2px; font-size: 11px; } .delivery-create-page .delivery-builder-flow .delivery-fields label em{ font-size: 9px; } .delivery-create-page .delivery-builder-flow .delivery-config > label{ margin-bottom: 12px; } .delivery-create-page .delivery-builder-flow .delivery-security-note{ margin: 14px 0; padding: 11px; } .delivery-create-page .delivery-builder-flow .delivery-security-note b{ font-size: 11px; } .delivery-create-page .delivery-builder-flow .delivery-security-note p{ margin-top: 6px; font-size: 10px; } .delivery-create-page .delivery-builder-flow .delivery-config > .btn{ margin-top: 8px; } .delivery-create-page .delivery-builder-flow .delivery-preview-result{ margin-top: 12px; padding: 11px 2px; } .delivery-create-page .delivery-builder-flow .delivery-preview-result b, .delivery-create-page .delivery-builder-flow .delivery-preview-result span{ font-size: 12px; } .delivery-create-page .delivery-builder-flow .delivery-preview-result p{ margin-top: 6px; font-size: 10px; } .delivery-create-page .delivery-builder-head{ padding: 16px 26px; } .delivery-create-page .delivery-builder-head h3{ margin: 0; font-size: 14px; } .delivery-request-summary{ position: sticky; top: 0; z-index: 2; margin: 0 0 19px; padding: 13px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 12px; background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--accent-soft) 48%, var(--panel))); } .delivery-summary-heading{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .delivery-summary-heading b{ color: var(--text); font-size: 12px; } .delivery-summary-heading span{ padding: 4px 7px; border-radius: 999px; background: var(--input-bg); color: var(--text-3); font-size: 10px; white-space: nowrap; } .delivery-summary-domain{ display: grid; gap: 3px; padding: 10px; border-radius: 8px; background: var(--input-bg); } .delivery-summary-domain > span, .delivery-summary-domain > small{ color: var(--text-3); font-size: 10px; } .delivery-summary-domain > b{ overflow: hidden; color: var(--text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .delivery-summary-stats{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .delivery-summary-stats > div{ display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 8px 9px; border: 1px solid var(--row-line); border-radius: 8px; background: var(--panel); } .delivery-summary-stats b{ color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; } .delivery-summary-stats span{ color: var(--text-3); font-size: 10px; white-space: nowrap; } .delivery-summary-filter-text{ margin: 8px 0 0; color: var(--text-3); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; } .delivery-summary-meta{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .delivery-summary-meta span{ padding: 4px 7px; border: 1px solid var(--row-line); border-radius: 999px; background: var(--panel); color: var(--text-2); font-size: 10px; } .delivery-request-summary .delivery-preview-result{ margin-top: 9px; padding: 9px 0 0; border-top: 1px solid var(--row-line); } .delivery-request-summary .delivery-preview-result span{ color: var(--text-2); font-size: 10px; } .delivery-request-summary .delivery-preview-result p{ margin-top: 4px; font-size: 10px; } .delivery-create-page .delivery-builder-flow .delivery-config > .btn{ min-height: 38px; } @media (max-width: 1100px) { .delivery-create-page .delivery-builder-grid.delivery-builder-flow{ grid-template-columns: minmax(0, 1fr) 340px; } } @media (max-width: 900px) { .delivery-create-page .delivery-builder-grid.delivery-builder-flow{ grid-template-columns: minmax(0, 1fr); } .delivery-create-page .delivery-builder-flow .delivery-form-main{ border-right: 0; border-bottom: 1px solid var(--row-line); } .delivery-create-page .delivery-builder-flow .delivery-config{ position: static; max-height: none; overflow: visible; } .delivery-request-summary{ position: static; } } @media (max-width: 720px) { .delivery-create-page .delivery-builder-flow .delivery-form-main, .delivery-create-page .delivery-builder-flow .delivery-config{ padding: 17px; } .delivery-request-summary{ margin-bottom: 15px; } } /* Both columns follow the panel scroll. A tall sticky sidebar stalls then jumps at its containing block boundary; only the bottom action rail stays sticky. */ #panel:has(.delivery-create-page){ overscroll-behavior-y: none; scrollbar-gutter: stable; } .delivery-create-page .delivery-builder-grid.delivery-builder-flow{ grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .delivery-create-page .delivery-builder-flow .delivery-form-main{ padding: 20px 24px 28px; } .delivery-create-page .delivery-builder-flow .delivery-config{ position: static; max-height: none; overflow: visible; padding: 20px 20px 24px; } .delivery-create-page .delivery-builder-flow .delivery-fields{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-height: none; overflow: visible; } .delivery-field-group[hidden], .delivery-field-empty[hidden], .delivery-filters[hidden]{ display: none; } .delivery-filter-toggle{ display: flex; width: 100%; align-items: center; gap: 10px; margin: 0 0 15px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .delivery-filter-toggle:not(:disabled):hover{ border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); } .delivery-filter-toggle > span{ color: var(--text); font-size: 12px; font-weight: 600; } .delivery-filter-toggle > small{ flex: 1; color: var(--text-3); font-size: 11px; } .delivery-filter-toggle > i{ color: var(--text-3); font-size: 14px; font-style: normal; transition: transform .15s ease; } .delivery-filter-toggle[aria-expanded="true"] > i{ transform: rotate(180deg); } .delivery-filter-toggle:disabled{ cursor: default; opacity: .7; } .delivery-create-page .delivery-builder-flow .delivery-filters{ grid-template-columns: repeat(3, minmax(0, 1fr)); margin: -5px 0 18px; padding: 13px; } .delivery-create-page .delivery-builder-flow .delivery-fields-step{ margin-top: 5px; } .delivery-field-toolbar{ display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; align-items: center; gap: 12px; margin: 12px 0 10px; } .delivery-field-search{ display: flex !important; min-width: 0; align-items: center; gap: 8px !important; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); } .delivery-field-search > span{ color: var(--text-3); font-size: 18px !important; line-height: 1; } .delivery-field-search input{ height: 36px !important; padding: 5px 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } .delivery-field-search:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); } .delivery-selected-total{ color: var(--text-2); font-size: 11px; white-space: nowrap; } .delivery-selected-total b{ color: var(--accent); font-size: 14px; font-variant-numeric: tabular-nums; } .delivery-field-actions{ display: flex; align-items: center; gap: 10px; } .delivery-field-actions .link{ padding: 4px 0; color: var(--accent); font-size: 11px; white-space: nowrap; } .delivery-field-group{ min-width: 0; overflow: clip; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); } .delivery-field-group > summary{ display: flex; min-height: 42px; align-items: center; gap: 10px; padding: 9px 13px; color: var(--text); cursor: pointer; list-style: none; } .delivery-field-group > summary::-webkit-details-marker{ display: none; } .delivery-field-group > summary::after{ width: 18px; color: var(--text-3); content: "⌄"; font-size: 14px; text-align: center; transition: transform .15s ease; } .delivery-field-group[open] > summary::after{ transform: rotate(180deg); } .delivery-field-group > summary > span{ flex: 1; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .delivery-field-group > summary > small{ color: var(--text-3); font-size: 11px; white-space: nowrap; } .delivery-field-group > summary > small b{ color: var(--accent); font-size: 12px; } .delivery-field-options{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 0 13px 11px; border-top: 1px solid var(--row-line); } .delivery-field-options > label{ display: flex; min-width: 0; align-items: center; gap: 8px; padding: 8px 2px; color: var(--text-2); font-size: 12px; cursor: pointer; } .delivery-field-options > label[hidden]{ display: none; } .delivery-field-options input{ flex: 0 0 auto; margin: 0; accent-color: var(--accent); } .delivery-field-options label > span{ flex: 1; min-width: 0; overflow: hidden; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; } .delivery-field-options label > em{ flex: 0 0 auto; padding: 2px 5px; border-radius: 4px; background: var(--amber-soft); color: var(--amber); font-size: 10px; font-style: normal; } .delivery-field-empty{ margin: 0; padding: 22px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-3); font-size: 12px; text-align: center; } .delivery-create-page .delivery-builder-flow .delivery-config{ border-left: 1px solid var(--row-line); background: var(--input-bg); } .delivery-request-summary{ position: static; margin: 0 0 15px; padding: 12px; border-radius: 12px; } .delivery-summary-heading{ margin-bottom: 9px; } .delivery-summary-heading b{ font-size: 13px; } .delivery-summary-heading span{ font-size: 10px; } .delivery-summary-domain{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 9px; border-radius: 0; border-bottom: 1px solid var(--row-line); background: transparent; } .delivery-summary-domain > div{ display: grid; gap: 2px; min-width: 0; } .delivery-summary-domain > div > span, .delivery-summary-domain > small{ color: var(--text-3); font-size: 10px; white-space: nowrap; } .delivery-summary-domain > div > b{ font-size: 13px; } .delivery-summary-domain > small > b{ color: var(--text-2); font-size: 11px; } .delivery-summary-stats{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 9px; } .delivery-summary-stats > div{ display: grid; gap: 4px; padding: 7px; } .delivery-summary-stats span{ font-size: 10px; } .delivery-summary-stats b{ font-size: 13px; } .delivery-summary-filter-text{ display: -webkit-box; overflow: hidden; margin-top: 8px; font-size: 10px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .delivery-summary-meta{ gap: 5px; margin-top: 8px; } .delivery-summary-meta span{ max-width: 100%; overflow: hidden; padding: 3px 7px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .delivery-request-summary .delivery-preview-result{ min-height: 0; margin-top: 8px; padding: 7px 0 0; } .delivery-request-summary .delivery-preview-result span{ font-size: 10px; line-height: 1.45; } .delivery-config-form{ display: grid; gap: 10px; } .delivery-config-form > label, .delivery-config-choices > label{ display: grid; gap: 5px; min-width: 0; color: var(--text-2); font-size: 11px; } .delivery-config-choices{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 9px; } .delivery-config-form textarea{ min-height: 58px; resize: vertical; } .delivery-config-form .delivery-config-title{ font-weight: 600; } .delivery-config-form .delivery-config-title input{ font-weight: 500; } .delivery-create-page .delivery-builder-flow .delivery-security-note{ margin: 11px 0 0; padding: 9px 10px; } .delivery-create-page .delivery-builder-flow .delivery-security-note p{ margin-top: 3px; } .delivery-builder-actions{ position: sticky; bottom: 0; z-index: 10; display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 22px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 -8px 20px rgba(27, 53, 89, .06); backdrop-filter: blur(12px); } .delivery-actions-info{ display: grid; gap: 3px; min-width: 0; } .delivery-actions-info b{ color: var(--text); font-size: 12px; } .delivery-actions-info span{ color: var(--text-3); font-size: 10px; } .delivery-action-buttons{ display: flex; flex: 0 0 auto; align-items: center; gap: 9px; } .delivery-action-buttons .btn{ min-height: 38px; padding-inline: 16px; } .delivery-action-buttons .btn:disabled{ opacity: .48; cursor: not-allowed; } @media (max-width: 1100px) { .delivery-create-page .delivery-builder-grid.delivery-builder-flow{ grid-template-columns: minmax(0, 1fr) 330px; } .delivery-create-page .delivery-builder-flow .delivery-form-main{ padding-inline: 18px; } .delivery-create-page .delivery-builder-flow .delivery-config{ padding-inline: 16px; } .delivery-field-toolbar{ grid-template-columns: minmax(150px, 1fr) auto; } .delivery-field-actions{ grid-column: 1 / -1; justify-content: flex-end; } } @media (max-width: 900px) { .delivery-create-page .delivery-builder-grid.delivery-builder-flow{ grid-template-columns: minmax(0, 1fr); } .delivery-create-page .delivery-builder-flow .delivery-form-main{ border-right: 0; border-bottom: 1px solid var(--row-line); } .delivery-create-page .delivery-builder-flow .delivery-config{ position: static; border-left: 0; } .delivery-builder-actions{ bottom: 0; } } @media (max-width: 720px) { .delivery-create-page .delivery-builder-flow .delivery-form-main, .delivery-create-page .delivery-builder-flow .delivery-config{ padding: 15px; } .delivery-field-toolbar{ grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .delivery-field-actions{ gap: 13px; } .delivery-field-options{ grid-template-columns: minmax(0, 1fr); } .delivery-create-page .delivery-builder-flow .delivery-filters{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .delivery-builder-actions{ align-items: stretch; flex-direction: column; gap: 8px; padding: 9px 12px; } .delivery-actions-info{ grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px; } .delivery-actions-info span{ text-align: right; } .delivery-action-buttons{ display: grid; grid-template-columns: 1fr 1fr; } .delivery-action-buttons .btn{ width: 100%; } } /* ========== plan ========== */ .update-plan-page{ display: grid; gap: 14px; padding: 14px; background: transparent; } .update-plan-hero{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: center; gap: 24px; min-height: 128px; padding: 22px 24px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(115deg, var(--panel) 0%, var(--panel) 58%, var(--accent-soft) 100%); } .update-plan-hero::after{ position: absolute; right: 156px; top: -72px; width: 180px; height: 180px; border: 34px solid color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 50%; content: ""; } .update-plan-hero > div{ position: relative; z-index: 1; min-width: 0; } .update-plan-hero > div:first-child > span{ color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; } .update-plan-hero h2{ margin: 7px 0 6px; color: var(--text); font-size: 22px; line-height: 1.3; } .update-plan-hero p{ max-width: 640px; margin: 0; color: var(--text-3); font-size: 11px; line-height: 1.7; } .update-plan-next{ display: grid; gap: 4px; align-content: center; min-height: 82px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 17%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--panel) 88%, var(--accent-soft)); box-shadow: 0 9px 24px rgba(28, 90, 176, .07); } .update-plan-next small{ color: var(--text-3); font-size: 9px; } .update-plan-next b{ overflow: hidden; color: var(--text-2); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .update-plan-next strong{ color: var(--accent); font-size: 20px; font-weight: 720; letter-spacing: -.3px; } .update-plan-summary{ display: grid; grid-template-columns: repeat(3, 150px) minmax(240px, 1fr); align-items: center; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); } .update-plan-summary > div{ display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 3px; padding: 14px 18px; border-right: 1px solid var(--row-line); } .update-plan-summary small{ grid-column: 1 / -1; margin-bottom: 3px; color: var(--text-3); font-size: 9px; } .update-plan-summary b{ color: var(--text); font-size: 18px; line-height: 1; } .update-plan-summary span{ color: var(--text-3); font-size: 9px; } .update-plan-summary > p{ margin: 0; padding: 12px 18px; color: var(--text-3); font-size: 10px; line-height: 1.6; } .update-plan-list{ overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); } .update-plan-list-head{ display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border-bottom: 1px solid var(--row-line); } .update-plan-list-head h3{ margin: 0; color: var(--text); font-size: 13px; } .update-plan-list-head p{ margin: 4px 0 0; color: var(--text-3); font-size: 9px; } .update-plan-list-head > span{ padding: 4px 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 9px; white-space: nowrap; } .update-plan-item{ display: grid; grid-template-columns: minmax(170px, .8fr) minmax(190px, .9fr) minmax(230px, 1.2fr); align-items: center; gap: 18px; padding: 15px 18px; border-bottom: 1px solid var(--row-line); transition: background-color .16s ease; } .update-plan-item:last-child{ border-bottom: 0; } .update-plan-item:hover{ background: var(--hover); } .update-plan-item.is-overdue{ box-shadow: inset 3px 0 var(--danger); } .update-plan-domain{ display: flex; align-items: center; gap: 10px; min-width: 0; } .update-plan-icon{ display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); } .update-plan-icon svg{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .update-plan-domain > div{ min-width: 0; } .update-plan-domain h3{ overflow: hidden; margin: 0; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .update-plan-domain p{ overflow: hidden; margin: 4px 0 0; color: var(--text-3); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .update-plan-schedule, .update-plan-detail{ display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; min-width: 0; } .update-plan-schedule small, .update-plan-detail small{ flex-basis: 100%; color: var(--text-3); font-size: 9px; } .update-plan-schedule b{ color: var(--text-2); font-size: 11px; font-weight: 600; } .update-plan-schedule em{ padding: 3px 6px; border-radius: 4px; background: var(--danger-soft); color: var(--danger); font-size: 9px; font-style: normal; } .plan-confidence{ padding: 3px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 9px; white-space: nowrap; } .plan-confidence.confirmed{ background: color-mix(in srgb, var(--ok) 11%, transparent); color: var(--ok); } .plan-confidence.window{ background: var(--amber-soft); color: var(--amber); } /* ========== 角色权限 ========== */ .update-plan-detail p{ width: 100%; overflow: hidden; margin: 0; color: var(--text-2); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .update-plan-detail input{ width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; outline: 0; background: var(--input-bg); color: var(--text); font: inherit; font-size: 10px; } .update-plan-detail input:focus{ border-color: var(--accent); } .update-plan-detail > span{ color: var(--text-3); font-size: 9px; } .update-plan-editor{ grid-column: 1 / -1; display: grid; grid-template-columns: 130px 130px 150px 150px minmax(120px, 1fr) auto; align-items: end; gap: 9px; margin: -3px 0 0 44px; padding: 11px 12px; border: 1px solid var(--row-line); border-radius: 8px; background: var(--input-bg); } .update-plan-editor label{ display: grid; gap: 5px; min-width: 0; color: var(--text-3); font-size: 9px; } .update-plan-editor input, .update-plan-editor select{ width: 100%; min-width: 0; height: 30px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 8px; outline: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 10px; } .update-plan-editor input:focus, .update-plan-editor select:focus{ border-color: var(--accent); } @media (max-width: 1100px) { .update-plan-summary{ grid-template-columns: repeat(3, 1fr); } .update-plan-summary > p{ grid-column: 1 / -1; border-top: 1px solid var(--row-line); } .update-plan-item{ grid-template-columns: minmax(160px, .8fr) minmax(180px, .9fr) minmax(210px, 1.1fr); gap: 12px; } .update-plan-editor{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .update-plan-editor .btn{ justify-self: start; } } @media (max-width: 720px) { .update-plan-page{ padding: 10px; } .update-plan-hero{ grid-template-columns: 1fr; padding: 18px; } .update-plan-next{ min-height: auto; } .update-plan-summary{ grid-template-columns: repeat(3, 1fr); } .update-plan-summary > div{ padding: 12px; } .update-plan-item{ grid-template-columns: 1fr; } .update-plan-editor{ grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; } } /* 角色权限配置：左侧选角色，右侧按功能、操作、数据域配置 */ /* ========== permission ========== */ .role-workspace{ display: grid; grid-template-columns: 238px minmax(0, 1fr); gap: 14px; min-height: 470px; } .role-sidebar, .role-editor{ min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); } .role-sidebar-title{ display: flex; align-items: center; justify-content: space-between; padding: 14px 15px; border-bottom: 1px solid var(--row-line); color: var(--text-2); font-size: 12px; } .role-sidebar-title span{ min-width: 22px; padding: 3px 6px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 10px; text-align: center; } .role-list{ display: grid; gap: 9px; padding: 8px; max-height: 610px; overflow: auto; } .role-list-group{ min-width: 0; padding-bottom: 3px; } .role-list-group > header{ display: flex; align-items: center; gap: 6px; padding: 4px 6px 2px; color: var(--text-2); } .role-list-group > header span{ overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .role-list-group > header em{ min-width: 16px; padding: 2px 4px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 9px; font-style: normal; text-align: center; } .role-list-group > small{ display: block; padding: 0 6px 4px; overflow: hidden; color: var(--text-3); font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .role-list-group > div{ display: grid; gap: 2px; } .role-list-group > div > p{ margin: 4px 6px 7px; color: var(--text-3); font-size: 9px; } .role-list-empty{ padding: 28px 10px; color: var(--text-3); font-size: 10px; text-align: center; } .role-list-item{ display: grid; grid-template-columns: 30px minmax(0, 1fr) 15px; align-items: center; gap: 9px; width: 100%; padding: 9px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; text-align: left; } .role-list-item:hover{ background: var(--hover); } .role-list-item.active{ background: var(--accent-soft); color: var(--accent); } .role-list-item > span:not(.role-list-icon){ display: grid; gap: 3px; min-width: 0; } .role-list-icon{ display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: var(--input-bg); color: var(--accent); font-size: 12px; font-weight: 700; } .role-list-item.active .role-list-icon{ background: var(--accent); color: #fff; } .role-list-item b{ overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .role-list-item small{ color: var(--text-3); font-size: 9px; } .role-list-item i{ color: var(--text-3); font-size: 16px; font-style: normal; } .role-editor{ padding: 20px 22px 16px; } .role-editor-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 17px; border-bottom: 1px solid var(--row-line); } .role-editor-kicker{ margin-bottom: 7px; color: var(--accent); font-size: 10px; font-weight: 650; } .role-name-input{ display: block; width: min(370px, 100%); border: 0; outline: 0; background: transparent; color: var(--text); font-size: 20px; font-weight: 700; } .role-description-input{ display: block; width: min(480px, 100%); margin-top: 8px; border: 0; outline: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 11px; } .role-department-field{ display: inline-grid; grid-template-columns: auto minmax(150px, 240px); align-items: center; gap: 8px; margin-top: 13px; color: var(--text-3); font-size: 10px; } .role-department-field select{ min-width: 0; height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; outline: 0; background: var(--input-bg); color: var(--text); font: inherit; font-size: 10px; } .role-department-field select:focus{ border-color: var(--accent); } .role-department-note{ display: block; margin-top: 6px; color: var(--text-3); font-size: 9px; } .role-department-note.warning{ color: var(--amber); } .role-editor-actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .role-editor-actions .btn{ white-space: nowrap; } .permission-config-block{ padding: 18px 0; border-bottom: 1px solid var(--row-line); } .permission-config-title{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .permission-config-title h3{ margin: 0; color: var(--text); font-size: 13px; } .permission-config-title p{ margin: 4px 0 0; color: var(--text-3); font-size: 10px; } .permission-all-check{ display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--accent); font-size: 11px; font-weight: 600; cursor: pointer; } .permission-all-check input{ accent-color: var(--accent); } .permission-matrix{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .permission-group{ min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); } .permission-group h4{ margin: 0 0 9px; color: var(--text-2); font-size: 10px; font-weight: 650; } .permission-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .permission-check{ display: flex; align-items: flex-start; gap: 7px; min-width: 0; padding: 7px; border-radius: 8px; cursor: pointer; } .permission-check:hover{ background: var(--panel); } .permission-check input{ margin: 2px 0 0; accent-color: var(--accent); } .permission-check span{ display: grid; gap: 3px; min-width: 0; } .permission-check b{ color: var(--text); font-size: 10px; font-weight: 550; } .permission-check small{ color: var(--text-3); font-size: 9px; } .permission-matrix.is-all .permission-check{ opacity: .55; } .domain-grid{ display: flex; flex-wrap: wrap; gap: 7px; } .domain-check{ display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text-2); font-size: 10px; cursor: pointer; } .domain-check:has(input:checked){ border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: var(--accent-soft); color: var(--accent); } .domain-check input{ accent-color: var(--accent); } .role-editor-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; color: var(--text-3); font-size: 10px; } .role-editor-foot .btn{ display: none; } @media (max-width: 900px) { .role-workspace{ grid-template-columns: 190px minmax(0, 1fr); }.permission-matrix{ grid-template-columns: 1fr; }.role-editor{ padding: 16px; }.role-editor-head{ display: block; }.role-editor-actions{ justify-content: flex-start; margin-top: 14px; } } @media (max-width: 720px) { .role-workspace{ grid-template-columns: 1fr; }.role-sidebar{ max-height: 220px; overflow: auto; }.role-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }.role-editor-foot .btn{ display: inline-flex; }.role-editor-foot{ align-items: flex-start; } } /* 坐标治理专用工作台 */ /* ========== 治理任务 ========== */ .coordinate-governance-dialog{ width: min(1320px,97vw); max-height: 92vh; overflow: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); box-shadow: 0 26px 70px rgba(25,45,65,.24); } .coordinate-governance-dialog>header{ display:flex; justify-content:space-between; gap:18px; padding:17px 21px; border-bottom:1px solid var(--row-line); } .coordinate-governance-dialog header span{ color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.12em; }.coordinate-governance-dialog header h3{ margin:5px 0; font-size:18px; }.coordinate-governance-dialog header p{ margin:0; color:var(--text-3); font-size:11px; }.coordinate-governance-dialog header button{ width:28px; height:28px; border:0; border-radius:8px; background:var(--hover); color:var(--text-2); font-size:20px; cursor:pointer; } .coordinate-governance-body{ display:grid; grid-template-columns:270px minmax(460px,1fr) 300px; min-height:590px; }.coordinate-governance-body>*{ min-width:0; padding:16px; border-right:1px solid var(--row-line); }.coordinate-governance-body>*:last-child{ border-right:0; }.coordinate-governance-body h4{ margin:0 0 13px; font-size:13px; }.coordinate-governance-body h4 em{ margin-left:5px; padding:2px 5px; border-radius:4px; background:var(--hover); color:var(--text-3); font-size:9px; font-style:normal; } .coordinate-primary{ position:relative; padding:10px 34px 10px 0; border-bottom:1px solid var(--row-line); }.coordinate-primary small, .coordinate-primary b{ display:block; }.coordinate-primary small{ color:var(--text-3); font-size:10px; }.coordinate-primary b{ margin-top:5px; color:var(--text); font-size:12px; line-height:1.5; }.coordinate-primary button{ position:absolute; top:10px; right:0; border:0; background:none; color:var(--accent); font-size:10px; cursor:pointer; }.coordinate-context{ display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--row-line); font-size:10px; }.coordinate-context span{ color:var(--text-3); }.coordinate-context b{ color:var(--text-2); }.coordinate-copy-all{ width:100%; margin-top:12px; }.coordinate-rule{ margin-top:16px; padding:11px; border:1px solid color-mix(in srgb,var(--accent) 15%,var(--border)); border-radius:8px; background:var(--accent-soft); }.coordinate-rule b{ color:var(--accent); font-size:11px; }.coordinate-rule p{ margin:5px 0 0; color:var(--text-3); font-size:10px; line-height:1.55; } .coordinate-picker{ display:flex; flex-direction:column; gap:10px; background:color-mix(in srgb,var(--panel) 97%,var(--accent-soft)); }.coordinate-search{ display:flex; gap:7px; }.coordinate-search input{ min-width:0; flex:1; padding:8px 10px; border:1px solid var(--border); border-radius:8px; outline:0; background:var(--input-bg); color:var(--text); font:inherit; font-size:11px; }.coordinate-map{ min-height:330px; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:#e8edf1; }.coordinate-pois{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:170px; overflow:auto; }.coordinate-pois>span{ grid-column:1/-1; padding:18px; color:var(--text-3); font-size:11px; text-align:center; }.coordinate-pois button{ position:relative; min-width:0; padding:8px 64px 8px 9px; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text-2); text-align:left; cursor:pointer; }.coordinate-pois button:hover{ border-color:var(--accent); background:var(--accent-soft); }.coordinate-pois b, .coordinate-pois span{ display:block; overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.coordinate-pois span{ margin-top:3px; color:var(--text-3); }.coordinate-pois em{ position:absolute; top:50%; right:8px; transform:translateY(-50%); color:var(--accent); font-size:9px; font-style:normal; } .coordinate-quota{ display:flex; flex-wrap:wrap; gap:5px 12px; align-items:center; min-height:26px; padding:0 9px; border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border)); border-radius:8px; background:color-mix(in srgb,var(--accent-soft) 45%,var(--panel)); color:var(--text-3); font-size:9px; }.coordinate-quota b{ color:var(--accent); font-size:9px; }.coordinate-quota em{ margin-left:auto; color:var(--text-3); font-style:normal; } .coordinate-result{ overflow:auto; }.coordinate-selected-poi{ min-height:48px; padding:9px; border-radius:8px; background:var(--hover); }.coordinate-selected-poi b, .coordinate-selected-poi span{ display:block; }.coordinate-selected-poi b{ font-size:11px; }.coordinate-selected-poi span{ margin-top:4px; color:var(--text-3); font-size:10px; line-height:1.4; }.coordinate-inputs{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }.coordinate-result label{ display:block; margin-top:10px; color:var(--text-3); font-size:10px; }.coordinate-result input, .coordinate-result select, .coordinate-result textarea{ display:block; width:100%; box-sizing:border-box; margin-top:5px; padding:8px; border:1px solid var(--border); border-radius:8px; outline:0; background:var(--input-bg); color:var(--text); font:inherit; font-size:11px; }.coordinate-validation{ margin-top:7px; padding:7px; border-radius:8px; background:#fff4dd; color:#9b711a; font-size:10px; }.coordinate-validation.valid{ background:#e9f7f0; color:#287b5c; }.coordinate-diff{ display:grid; gap:5px; margin-top:12px; padding:10px; border:1px solid var(--border); border-radius:8px; }.coordinate-diff b{ font-size:10px; }.coordinate-diff span{ color:var(--text-3); font-size:10px; }.coordinate-diff em{ color:var(--accent); font-style:normal; }.coordinate-audit{ margin-top:12px; }.coordinate-audit>b{ font-size:10px; }.coordinate-audit p{ margin:7px 0 0; padding-left:8px; border-left:2px solid var(--accent); color:var(--text-3); font-size:9px; }.coordinate-audit p span{ display:block; margin-top:2px; color:var(--text-2); }.coordinate-governance-dialog>footer{ display:flex; gap:8px; padding:13px 18px; border-top:1px solid var(--row-line); }.coordinate-governance-dialog>footer span{ flex:1; } @media(max-width:900px) { .coordinate-governance-body{ grid-template-columns:190px minmax(300px,1fr) 230px; min-height:510px; } .coordinate-governance-body>*{ padding:12px; } .coordinate-map{ min-height:280px; } .coordinate-pois{ max-height:110px; } .coordinate-result{ grid-column:auto; display:flex; border-top:0; } .coordinate-result .coordinate-inputs{ gap:5px; } .coordinate-result input, .coordinate-result select, .coordinate-result textarea{ padding:7px; font-size:10px; } } @media(max-width:720px) { .coordinate-governance-body{ display:block; min-height:0; } .coordinate-governance-body>*{ border-right:0; border-bottom:1px solid var(--row-line); } .coordinate-map{ min-height:300px; } .coordinate-result{ display:flex; } .coordinate-pois{ grid-template-columns:1fr; } } /* 治理任务多人分配 */ .governance-assignment{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:12px 0; padding:14px 16px; border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border)); border-radius:12px; background:color-mix(in srgb,var(--accent-soft) 52%,var(--panel)); } .governance-assignment>div:first-child{ min-width:210px; }.governance-assignment b{ color:var(--text); font-size:13px; }.governance-assignment p{ margin:5px 0 0; color:var(--text-3); font-size:11px; line-height:1.5; }.assignment-controls{ flex:1; min-width:0; }.assignment-people{ display:flex; flex-wrap:wrap; gap:7px; }.assignment-people label{ display:flex; align-items:center; gap:7px; min-width:145px; padding:7px 9px; border:1px solid var(--border); border-radius:8px; background:var(--panel); cursor:pointer; }.assignment-people label:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }.assignment-people input{ accent-color:var(--accent); }.assignment-people b, .assignment-people small{ display:block; }.assignment-people b{ color:var(--text-2); font-size:11px; }.assignment-people small{ margin-top:2px; color:var(--text-3); font-size:9px; }.assignment-actions{ display:flex; justify-content:flex-end; align-items:end; gap:8px; margin-top:10px; }.assignment-actions label{ display:grid; gap:4px; color:var(--text-3); font-size:10px; }.assignment-actions input{ height:30px; box-sizing:border-box; padding:0 7px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font:inherit; font-size:11px; }.assignment-actions input[type=number]{ width:78px; } @media(max-width:720px) { .governance-assignment{ display:block; }.assignment-controls{ margin-top:12px; }.assignment-actions{ justify-content:flex-start; flex-wrap:wrap; } } /* 治理进度：负责人快速查看人员负载，并从人员下钻到具体任务。 */ .governance-trend-bars i.assigned{ background:color-mix(in srgb,var(--accent) 38%,#dce7f5); }.governance-trend-bars i.completed{ background:#45a47a; }.governance-person-row.active{ background:color-mix(in srgb,var(--accent-soft) 52%,var(--panel)); }.governance-person-row.active{ box-shadow:inset 3px 0 var(--accent); }.governance-progress-bar .completed, .governance-person-track i.completed{ background:#45a47a; }.governance-progress-bar .reviewing, .governance-person-track i.reviewing{ background:#e4ad3e; }.governance-progress-bar .processing, .governance-person-track i.processing{ background:var(--accent); }.governance-progress-bar .returned{ background:#df756c; }.governance-progress-bar .pending, .governance-person-track i.pending{ background:#c9d3df; }.governance-person-arrow{ color:var(--text-3); font-size:18px; }.governance-progress-empty{ display:grid; min-height:84px; place-items:center; padding:16px; color:var(--text-3); font-size:11px; text-align:center; }.governance-due.overdue{ color:#c95f56; font-weight:650; } @media(max-width:640px) {.governance-person-arrow{ grid-column:4; grid-row:1; } } /* 数据可信度中心 */ .trust-page{ display:grid; gap:11px; padding:18px; } .trust-hero{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); border-radius:12px; background:linear-gradient(120deg,color-mix(in srgb,var(--accent-soft) 68%,var(--panel)),var(--panel)); } .trust-hero>div:first-child>span{ color:var(--accent); font-size:9px; font-weight:750; letter-spacing:.13em; }.trust-hero h2{ margin:5px 0 4px; font-size:20px; }.trust-hero p{ margin:0; color:var(--text-3); font-size:11px; }.trust-hero-rate{ min-width:145px; padding-left:18px; border-left:1px solid color-mix(in srgb,var(--accent) 18%,var(--border)); text-align:right; }.trust-hero-rate small, .trust-hero-rate b, .trust-hero-rate span{ display:block; }.trust-hero-rate small{ color:var(--text-3); font-size:9px; }.trust-hero-rate b{ margin:2px 0; color:var(--accent); font-size:28px; line-height:1.1; }.trust-hero-rate span{ color:var(--text-3); font-size:9px; } .trust-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.trust-kpis>div{ padding:11px 13px; border:1px solid var(--border); border-radius:8px; background:var(--panel); }.trust-kpis small, .trust-kpis b, .trust-kpis span{ display:block; }.trust-kpis small{ color:var(--text-3); font-size:9px; }.trust-kpis b{ margin:3px 0; font-size:18px; }.trust-kpis span{ color:var(--text-3); font-size:9px; } .trust-domain-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }.trust-domain-card{ min-width:0; padding:11px 12px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); text-align:left; cursor:pointer; transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; }.trust-domain-card:hover, .trust-domain-card.active{ border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); box-shadow:0 7px 20px rgba(34,83,132,.08); transform:translateY(-1px); }.trust-domain-card.active{ background:color-mix(in srgb,var(--accent-soft) 42%,var(--panel)); }.trust-domain-card>div:first-child{ display:flex; align-items:center; justify-content:space-between; gap:6px; }.trust-domain-card>div span{ font-size:11px; font-weight:650; }.trust-domain-card>div em{ overflow:hidden; color:var(--text-3); font-size:9px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }.trust-domain-card>strong{ display:block; margin-top:8px; color:var(--accent); font-size:18px; }.trust-domain-track{ height:5px; margin:5px 0 8px; overflow:hidden; border-radius:4px; background:var(--hover); }.trust-domain-track i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#67b5dd)); }.trust-domain-card footer{ display:flex; justify-content:space-between; gap:5px; color:var(--text-3); font-size:9px; } .trust-panel{ overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--panel); }.trust-panel>header{ display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 14px; border-bottom:1px solid var(--row-line); }.trust-panel>header b, .trust-panel>header span{ display:block; }.trust-panel>header b{ font-size:12px; }.trust-panel>header span{ margin-top:3px; color:var(--text-3); font-size:9px; }.trust-panel>header em{ padding:3px 7px; border-radius:4px; background:var(--accent-soft); color:var(--accent); font-size:9px; font-style:normal; } .trust-object-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:8px 14px; border-bottom:1px solid var(--row-line); }.trust-object-toolbar>div{ display:flex; align-items:center; gap:7px; flex:1; max-width:430px; }.trust-object-toolbar input{ width:100%; min-height:30px; padding:5px 9px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font:inherit; font-size:10px; outline:0; }.trust-object-toolbar input:focus{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent); }.trust-object-toolbar>span{ color:var(--text-3); font-size:9px; } .trust-object-list{ display:grid; }.trust-object-row{ display:grid; grid-template-columns:minmax(190px,1.5fr) .55fr .65fr .65fr 1.25fr 54px; gap:10px; align-items:center; min-height:48px; padding:0 14px; border-bottom:1px solid var(--row-line); font-size:10px; }.trust-object-row:last-child{ border-bottom:0; }.trust-object-row.head{ min-height:32px; background:var(--hover); color:var(--text-3); font-size:9px; }.trust-object-row.is-clickable{ cursor:pointer; transition:background .14s ease; }.trust-object-row.is-clickable:hover{ background:color-mix(in srgb,var(--accent-soft) 46%,var(--panel)); }.trust-object-row b, .trust-object-row small{ display:block; }.trust-object-row small{ margin-top:2px; color:var(--text-3); font-size:9px; }.trust-object-row>strong{ font-size:11px; }.trust-object-row>strong.verified{ color:#368467; }.trust-object-row>strong.remaining{ color:#a9782a; }.trust-object-progress{ display:flex; align-items:center; gap:8px; }.trust-object-progress>span{ flex:1; height:6px; overflow:hidden; border-radius:4px; background:var(--hover); }.trust-object-progress i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#42a47a,var(--accent)); }.trust-object-progress b{ width:38px; color:var(--text-2); font-size:9px; text-align:right; }.trust-object-open{ min-height:25px; padding:3px 8px; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border)); border-radius:8px; background:var(--accent-soft); color:var(--accent); font:inherit; font-size:9px; cursor:pointer; }.trust-object-open:disabled{ border-color:var(--border); background:var(--hover); color:var(--text-3); cursor:default; } .trust-case-list{ display:grid; }.trust-case-list article{ display:grid; grid-template-columns:30px 1fr 82px; gap:10px; align-items:center; min-height:66px; padding:8px 14px; border-bottom:1px solid var(--row-line); }.trust-case-list article:last-child{ border-bottom:0; }.trust-case-icon{ display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:14px; font-weight:700; }.trust-case-main>div{ display:flex; align-items:center; gap:6px; }.trust-case-main h3{ max-width:360px; overflow:hidden; margin:0; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.trust-case-main>div span, .trust-case-main>div em{ padding:2px 5px; border-radius:4px; font-size:9px; font-style:normal; }.trust-case-main>div span{ background:var(--hover); color:var(--text-3); }.trust-case-main>div em{ background:#fff3dc; color:#98701f; }.trust-case-main p{ margin:5px 0; color:var(--accent); font-size:11px; font-weight:650; }.trust-case-main footer{ display:flex; gap:5px; color:var(--text-3); font-size:9px; }.trust-case-main footer i{ font-style:normal; }.trust-confidence{ text-align:right; }.trust-confidence span, .trust-confidence b{ display:block; }.trust-confidence span{ color:var(--text-3); font-size:9px; }.trust-confidence b{ margin-top:3px; color:#368467; font-size:10px; } .trust-rule-flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:14px; }.trust-rule-flow article{ position:relative; display:flex; gap:9px; min-height:70px; padding:12px; border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb,var(--hover) 55%,var(--panel)); }.trust-rule-flow article>span{ display:grid; flex:0 0 26px; width:26px; height:26px; place-items:center; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:9px; font-weight:700; }.trust-rule-flow b{ font-size:11px; }.trust-rule-flow p{ margin:5px 0 0; color:var(--text-3); font-size:9px; line-height:1.5; }.trust-rule-flow article>i{ position:absolute; z-index:1; top:32px; right:-10px; color:var(--accent); font-style:normal; }.trust-rule-note{ margin:0 14px 14px; padding:11px 13px; border-left:3px solid var(--accent); border-radius:0 8px 8px 0; background:var(--accent-soft); }.trust-rule-note b{ font-size:10px; }.trust-rule-note p{ margin:4px 0 0; color:var(--text-3); font-size:9px; line-height:1.6; }.trust-empty{ display:grid; min-height:90px; place-items:center; padding:15px; color:var(--text-3); font-size:10px; text-align:center; } @media(max-width:900px) { .trust-domain-grid{ grid-template-columns:repeat(3,1fr); }.trust-object-row{ grid-template-columns:minmax(150px,1.4fr) .5fr .6fr .6fr 1fr 48px; } } @media(max-width:720px) { .trust-page{ padding:11px; }.trust-kpis, .trust-domain-grid{ grid-template-columns:repeat(2,1fr); }.trust-hero-rate{ display:none; }.trust-object-row{ grid-template-columns:1.5fr .55fr .65fr 48px; }.trust-object-row>*:nth-child(4), .trust-object-row>*:nth-child(5){ display:none; }.trust-rule-flow{ grid-template-columns:1fr; }.trust-rule-flow article>i{ display:none; }.trust-case-list article{ grid-template-columns:28px 1fr; }.trust-confidence{ display:none; } } /* 品牌门店 */ .brand-store-detail{ min-width:0; padding:12px 18px 22px; } .brand-store-page{ min-width:0; padding:0; }.brand-store-filter-panel{ flex:none; min-width:0; overflow:hidden; margin-bottom:0; border:0; border-bottom:1px solid var(--row-line); border-radius:0; background:transparent; box-shadow:none; }.brand-store-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px 8px; }.brand-store-head-copy{ display:flex; align-items:baseline; gap:10px; min-width:0; }.brand-store-count{ color:var(--text); font-size:14px; font-weight:650; white-space:nowrap; }.brand-store-head-copy>span{ overflow:hidden; color:var(--text-3); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.brand-store-actions{ display:flex; flex:none; gap:7px; } /* 门店筛选：一行阅读顺序与 DOM 一致，查询固定在末尾。材质和箭头由共享控件样式管理。 */ .brand-store-toolbar{ box-sizing:border-box; display:grid; grid-template-columns:minmax(96px,.9fr) minmax(150px,1.4fr) repeat(3,minmax(80px,.7fr)) minmax(116px,1fr) minmax(130px,1.1fr) minmax(108px,.9fr) minmax(108px,.9fr) 56px; gap:7px; align-items:center; width:100%; min-width:0; margin:0; padding:0 14px 10px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; } .brand-store-toolbar input, .brand-store-toolbar select{ box-sizing:border-box; width:100%; min-width:0; height:36px; padding:0 8px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text-2); font:inherit; font-size:var(--field-size); font-weight:400; line-height:normal; text-overflow:ellipsis; white-space:nowrap; } .brand-store-toolbar input::placeholder{ color:var(--text-3); opacity:1; font-size:var(--field-size);} .brand-store-toolbar select{ cursor:pointer; } .brand-store-toolbar select.brand-store-filter-province, .brand-store-toolbar select.brand-store-filter-city, .brand-store-toolbar select.brand-store-filter-district{ padding-right:22px; text-overflow:clip; } .brand-store-toolbar select:disabled{ cursor:not-allowed; opacity:.56; } .brand-store-toolbar .btn{ width:100%; min-width:0; white-space:nowrap; } .brand-store-table{ overflow:auto; flex:1; min-height:0; border:0; border-radius:0; background:var(--panel); }.brand-store-table table{ width:100%; border-collapse:collapse; font-size:var(--field-size); }.brand-store-table th{ height:42px; background:var(--hover); color:var(--text-3); font-size:var(--field-label-size); font-weight:600; text-align:left; }.brand-store-table td{ border-top:1px solid var(--row-line); color:var(--text-2); vertical-align:middle; }.brand-store-table td b, .brand-store-table td small{ display:block; font-size:var(--field-size);}.brand-store-table td b{ color:var(--text); font-size:var(--field-size); font-weight:500;}.brand-store-table td small{ max-width:340px; margin-top:4px; overflow:hidden; color:var(--text-3); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.brand-store-table td code{ display:block; color:var(--text-2); font-size:var(--field-size); } .brand-store-table td:nth-last-child(-n+2){ white-space:nowrap; }.brand-store-table td:last-child .btn{ white-space:nowrap; }.brand-store-detail .record-sections{ padding:0; }.brand-store-months article.open{ border-color:color-mix(in srgb,#42a47a 28%,var(--border)); background:color-mix(in srgb,#eaf7f1 55%,var(--panel)); }.brand-store-months article.closed{ background:var(--hover); }.brand-store-months article.empty{ border-style:dashed; opacity:.72; } @media(max-width:720px){.brand-store-page{padding:12px 14px 24px}.brand-store-toolbar{padding-inline:12px}.brand-store-head{padding-inline:12px}} .record-empty-note{ padding:12px 0; color:var(--text-3); font-size:10px; } /* 门店档案：一个大档案容器，内部按类别拆分为轻量小卡片。 */ .brand-store-detail-redesigned{ --store-value-color:var(--text); --store-label-color:var(--text-2); display:block; box-sizing:border-box; width:auto; max-width:none; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; margin:0; padding:16px 18px 22px; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } .store-info-layout{ margin-top:0; padding:0; }.store-info-main{ display:flex; flex-direction:column; gap:12px; }.store-info-card{ display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid var(--site-line,var(--border)); border-radius:12px; background:var(--site-card-raised,var(--panel)); box-shadow:none; } .store-info-card>header{ display:flex; align-items:center; gap:9px; min-height:42px; padding:0 14px; border-bottom:1px solid var(--site-row-line,var(--row-line)); background:var(--site-heading,var(--hover)); }.store-info-kicker{ display:grid; flex:0 0 24px; width:24px; height:24px; place-items:center; border:1px solid var(--site-line,var(--border)); border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }.store-info-card h3{ margin:0; color:var(--store-value-color); font-size:14px; font-weight:600; line-height:1.5; } .store-info-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .store-info-field{ box-sizing:border-box; min-width:0; min-height:60px; padding:9px 12px; border-bottom:1px solid var(--site-row-line,var(--row-line)); } .store-info-field.store-info-wide{ grid-column:1 / -1; } .store-info-field label{ display:block; margin-bottom:4px; color:var(--store-label-color); font-size:var(--field-label-size); font-weight:400; line-height:1.5; } .store-info-field strong{ display:block; overflow-wrap:anywhere; color:var(--store-value-color); font-size:var(--field-size); font-weight:400; line-height:1.5; } .store-info-field.is-empty strong{ color:var(--text-3); font-weight:400; } .store-enum-tag{ display:inline-flex; align-items:center; min-height:24px; box-sizing:border-box; padding:2px 9px; border:1px solid rgba(71,128,190,.24); border-radius:8px; background:rgba(225,239,255,.72); color:#2f679d; font-size:var(--field-label-size); font-weight:500; line-height:1.35; white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); } .store-enum-tag.is-open{ border-color:rgba(43,157,112,.28); background:rgba(225,248,237,.8); color:#227b59; } .store-enum-tag.is-closed{ border-color:rgba(201,91,91,.25); background:rgba(255,235,235,.8); color:#a84c4c; } .store-enum-tag.is-new{ border-color:rgba(64,132,220,.28); background:rgba(229,241,255,.82); color:#2567ad; } .store-enum-tag.is-pending{ border-color:rgba(139,153,170,.25); background:rgba(242,246,250,.86); color:#6d7e90; } .store-enum-tag.is-sales{ border-color:rgba(84,122,220,.28); background:rgba(232,239,255,.82); color:#3c62ae; } .store-enum-tag.is-delivery{ border-color:rgba(174,123,53,.28); background:rgba(255,244,222,.84); color:#9b6a21; } .store-enum-tag.is-service{ border-color:rgba(45,153,147,.28); background:rgba(228,248,246,.84); color:#287f7b; } .store-enum-tag.is-neutral{ border-color:rgba(71,128,190,.24); background:rgba(236,244,252,.78); color:#3e668b; } .store-region-inputs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .store-region-inputs .store-editor-field > label{ margin-bottom:0; } @media(max-width:640px){.store-region-inputs{grid-template-columns:1fr}} .store-coordinate-system{ margin-left:6px; vertical-align:middle; font-size:11px; font-weight:500; } @media(max-width:640px){.brand-store-detail-redesigned{padding:12px 12px 18px}.store-info-fields{grid-template-columns:1fr}} /* 组织配置表单 */ .settings-user-dialog .form-hint{ margin: 5px 0 0; color: var(--text-3); font-size: 10px; } .settings-user-dialog textarea{ box-sizing:border-box; width:100%; min-height:66px; margin-top:5px; padding:8px 9px; border:1px solid var(--border); border-radius:8px; resize:vertical; background:var(--input-bg); color:var(--text); font:inherit; line-height:1.5; } .department-description-count{ display:block; margin-top:4px; color:var(--text-3); font-size:9px; } .department-card-description{ display:-webkit-box; margin:4px 0 0; overflow:hidden; color:var(--text-2); font-size:10px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .settings-phone{ color:var(--text-2); font-variant-numeric:tabular-nums; letter-spacing:.2px; } .settings-user-toolbar{ display:flex; align-items:center; gap:8px; margin:10px 0; } .settings-user-toolbar input, .settings-user-toolbar select{ box-sizing:border-box; height:34px; border:1px solid var(--border); border-radius:8px; padding:0 10px; background:var(--input-bg); color:var(--text); font:inherit; font-size:10px; } .settings-user-toolbar input{ width:230px; } .settings-user-toolbar select{ min-width:110px; } .settings-user-toolbar > span{ margin-left:auto; color:var(--text-3); font-size:10px; } .settings-user-status{ display:inline-flex; align-items:center; gap:6px; vertical-align:middle; white-space:nowrap; position:relative; font-weight:500; letter-spacing:.2px; } .settings-user-status::before{ content:''; width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:currentColor; } .settings-user-status.active{ color:#15803d; } .settings-user-status.inactive{ color:#dc2626; } /* ── 状态指示灯：球体质感 + 心跳节奏 + 柔光晕 ───────────────────────── 高级感不来自「动得多」，来自三件事： ① 球体而非色块 —— 左上高光/右下暗部，让 8px 也有体积 ② 心跳而非呼吸 —— 双拍（咚·咚）后长静默；匀速循环像机器，有停顿才像活的 ③ 软边而非硬环 —— 内层 box-shadow 波 + 外层径向渐变晕，边缘化开 停用态刻意不放波、只做 5.2s 极缓明暗（与 3.6s 互质，避免两者同步呼吸）： 红色高频闪烁会被读成「系统告警」，那是另一套语义。 */ .settings-user-status.active::before{ background:radial-gradient(circle at 34% 28%, #86efac 0%, #22c55e 42%, #15803d 100%); animation:dotBeat 3.6s cubic-bezier(.33,0,.25,1) infinite, dotWave 3.6s cubic-bezier(.25,.8,.35,1) infinite; } .settings-user-status.inactive::before{ background:radial-gradient(circle at 34% 28%, #fca5a5 0%, #ef4444 42%, #b91c1c 100%); box-shadow:0 0 5px rgba(220,38,38,.20); animation:dotIdle 5.2s ease-in-out infinite; } @keyframes dotBeat{ 0%{ transform:scale(1); } 5%{ transform:scale(1.18); } 13%{ transform:scale(1); } 19%{ transform:scale(1.10); } 28%{ transform:scale(1); } 100%{ transform:scale(1); } } @keyframes dotWave{ 0%{ box-shadow:0 0 0 0 rgba(21,128,61,.38); } 32%{ box-shadow:0 0 0 6px rgba(21,128,61,0); } 100%{ box-shadow:0 0 0 6px rgba(21,128,61,0); } } @keyframes dotIdle{ 0%,100%{ opacity:.92; } 50%{ opacity:.46; } } /* 删除账号时整行淡出（原地移除，不重建面板） */ .settings-table tbody tr.row-removing{ animation:rowRemoving .28s cubic-bezier(.4,0,.2,1) forwards; pointer-events:none; } @keyframes rowRemoving{ 0%{ opacity:1; } 55%{ opacity:.42; } 100%{ opacity:0; } } /* 状态在原地切换时的一次性过渡：让「变了」这件事被看见，而不必重建整块面板 */ .settings-user-status.status-switching{ animation:statusSwitching .52s cubic-bezier(.22,.8,.3,1); } @keyframes statusSwitching{ 0%{ opacity:.25; transform:translateY(-1px) scale(.94); } 60%{ opacity:1; transform:translateY(0) scale(1.025); } 100%{ opacity:1; transform:scale(1); } } /* 悬停整行时把球体点亮一档，给交互一点回应（filter 不干扰动画） */ .settings-table tr:hover .settings-user-status.active::before{ filter:brightness(1.16) saturate(1.12); } .settings-table tr:hover .settings-user-status.inactive::before{ filter:brightness(1.12); } @media (prefers-reduced-motion: reduce){ .settings-user-status.active::before, .settings-user-status.inactive::before{ animation:none; } .settings-user-status.status-switching{ animation:none; } .settings-table tbody tr.row-removing{ animation:none; opacity:0; } } @media print{ .settings-user-status.active::before, .settings-user-status.inactive::before{ animation:none; filter:none; } } /* ===== 统一行操作按钮（全站一致）===== */ .row-icon-actions{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } .icon-btn{ display:inline-flex; align-items:center; justify-content:center; height:26px; padding:0 8px; border:0; border-radius:6px; background:transparent; color:#1677ff; font:inherit; font-size:12px; font-weight:500; line-height:1; cursor:pointer; white-space:nowrap; transition:background .15s ease; } .icon-btn:hover{ background:#e6f4ff; color:#0958d9; } .icon-btn:focus-visible{ outline:2px solid rgba(22,119,255,.4); outline-offset:1px; } .icon-btn:active{ opacity:.8; } .icon-btn.danger{ color:#ff4d4f; } .icon-btn.danger:hover{ background:#fff1f0; color:#cf1322; } .icon-btn:disabled{ color:var(--text-3); opacity:.5; cursor:not-allowed; } .icon-btn:disabled:hover{ background:transparent; } th.col-actions, .settings-table th[data-user-actions-header]{ text-align:center; min-width:140px; } .settings-user-dialog .department-role-guidance{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:7px; padding:9px 10px; border:1px solid var(--row-line); border-radius:8px; background:var(--hover); } .department-role-guidance span{ color:var(--text-3); font-size:10px; line-height:1.5; } .department-role-create-link{ flex:none; border:0; padding:4px 0; background:transparent; color:var(--accent); font:inherit; font-size:10px; cursor:pointer; } .department-role-create-link:hover{ text-decoration:underline; } .department-role-create-link[hidden]{ display:none; } .settings-user-dialog select[multiple]{ height: auto; padding: 7px 9px; } .department-role-empty{ padding:6px 0; color:var(--text-3); font-size:9px; font-style:normal; } .quick-role-dialog{ width:420px; } .department-roles-dialog{ width:520px; } .department-role-dialog-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; } .department-role-dialog-head h3{ margin:0 0 5px; } .department-role-list{ display:flex; flex-direction:column; gap:9px; max-height:330px; overflow:auto; padding:2px; margin-bottom:18px; } .department-role-item{ display:flex; align-items:center; gap:11px; padding:12px 13px; border:1px solid var(--row-line); border-radius:12px; background:var(--hover); } .department-role-item > div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .department-role-item b{ color:var(--text); font-size:12px; } .department-role-item small{ color:var(--text-3); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .department-role-empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:130px; border:1px dashed var(--border); border-radius:12px; color:var(--text-3); } .department-role-empty-state b{ color:var(--text-2); font-size:12px; } .department-role-empty-state span{ font-size:10px; } .quick-role-permissions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:14px; padding:11px; border:1px solid var(--row-line); border-radius:8px; background:var(--hover); } .quick-role-permissions>b{ grid-column:1/-1; color:var(--text-2); font-size:10px; } .quick-role-permissions label{ display:flex; align-items:center; gap:6px; margin:0; color:var(--text-2); font-size:9px; } .department-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .department-card{ min-width:0; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--panel); box-shadow:0 5px 16px rgba(35,68,116,.035); } .department-card header, .department-card footer, .department-identity, .department-metrics{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .department-identity{ justify-content:flex-start; min-width:0; } .department-identity>span{ display:grid; flex:0 0 30px; width:30px; height:30px; place-items:center; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:700; } .department-identity b, .department-identity small, .department-metrics small, .department-metrics strong{ display:block; } .department-identity b{ overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; } .department-identity small{ margin-top:3px; color:var(--text-3); font-size:9px; } .department-status{ padding:3px 7px; border-radius:4px; background:var(--accent-soft); color:var(--accent); font-size:9px; font-style:normal; } .department-status.inactive{ background:var(--hover); color:var(--text-3); } .department-metrics{ justify-content:flex-start; gap:30px; margin:17px 0 14px; padding:12px 0; border-top:1px solid var(--row-line); border-bottom:1px solid var(--row-line); } .department-metrics small, .department-roles>small{ color:var(--text-3); font-size:9px; } .department-roles>small{ display:flex; align-items:center; gap:5px; } .role-hover-hint{ color:var(--accent); font-size:9px; font-style:normal; font-weight:400; opacity:.72; } /* ========== 坐标与地图纠错 ========== */ .department-metrics strong{ margin-top:4px; font-size:18px; } .department-metrics strong i{ color:var(--text-3); font-size:9px; font-style:normal; font-weight:400; } .department-roles>div{ display:flex; flex-wrap:wrap; gap:5px; min-height:25px; margin-top:7px; } .department-role-chip{ position:relative; display:inline-flex; align-items:center; gap:4px; padding:4px 7px; border:1px solid transparent; border-radius:4px; background:var(--accent-soft); color:var(--accent); font-size:9px; outline:none; cursor:default; } .department-role-chip>b{ font-weight:500; } .department-role-chip>em{ display:inline-grid; min-width:13px; height:13px; place-items:center; padding:0 3px; border-radius:8px; background:var(--accent); color:#fff; font-size:9px; font-style:normal; line-height:1; } .department-role-chip:hover, .department-role-chip:focus-visible{ border-color:var(--accent); background:var(--panel); } .department-role-tooltip{ position:absolute; z-index:20; left:50%; bottom:calc(100% + 9px); width:190px; padding:11px 12px; border:1px solid var(--border); border-radius:8px; background:var(--panel); box-shadow:0 12px 28px rgba(31,68,120,.16); color:var(--text); opacity:0; pointer-events:none; transform:translate(-50%,4px); transition:opacity .14s ease,transform .14s ease; } .department-role-tooltip::after{ content:""; position:absolute; left:50%; bottom:-5px; width:9px; height:9px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--panel); transform:translateX(-50%) rotate(45deg); } .department-role-chip:hover .department-role-tooltip, .department-role-chip:focus-visible .department-role-tooltip{ opacity:1; pointer-events:auto; transform:translate(-50%,0); } .department-role-tooltip>strong, .department-role-tooltip>small{ display:block; } .department-role-tooltip>strong{ color:var(--text); font-size:11px; } .department-role-tooltip>small{ margin-top:3px; color:var(--text-3); font-size:9px; } .department-role-tooltip ul{ display:flex; flex-direction:column; gap:6px; max-height:130px; overflow:auto; margin:9px 0 0; padding:8px 0 0; border-top:1px solid var(--row-line); list-style:none; } .department-role-tooltip li{ display:flex; justify-content:space-between; gap:8px; min-width:0; } .department-role-tooltip li b{ overflow:hidden; color:var(--text-2); font-size:9px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; } .department-role-tooltip li small{ overflow:hidden; color:var(--text-3); font-size:9px; text-overflow:ellipsis; white-space:nowrap; } .department-role-tooltip li.is-empty{ color:var(--text-3); font-size:9px; } .department-roles em{ padding-top:5px; color:var(--text-3); font-size:9px; font-style:normal; } .department-card footer{ margin-top:17px; padding-top:11px; border-top:1px solid var(--row-line); } .department-card footer>span{ color:var(--text-3); font-size:9px; } .department-card footer button{ border:0; background:transparent; color:var(--accent); font:inherit; font-size:10px; cursor:pointer; } .department-card footer button i{ margin-left:3px; font-style:normal; } .department-empty{ grid-column:1/-1; padding:42px 20px; border:1px dashed var(--border); border-radius:12px; color:var(--text-3); font-size:10px; text-align:center; } /* Department cards follow the blue glass workspace instead of the legacy white panel. */ html[data-theme="f"][data-color-theme="blue"] :is([data-appearance="standard"],[data-appearance="macos27"]) .department-card{ position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 66%, transparent), rgba(255,255,255,.18)), color-mix(in srgb, var(--panel) 60%, transparent); box-shadow: 0 10px 24px rgba(37,77,125,.07), inset 0 1px 0 rgba(255,255,255,.62); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } html[data-theme="f"][data-color-theme="blue"] :is([data-appearance="standard"],[data-appearance="macos27"]) .department-card::before{ position:absolute; inset:0 0 auto; height:1px; content:""; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 36%, white), transparent); opacity:.75; } @media (hover:hover) and (pointer:fine) { html[data-theme="f"][data-color-theme="blue"] :is([data-appearance="standard"],[data-appearance="macos27"]) .department-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 32%, transparent); box-shadow:0 16px 30px rgba(37,77,125,.12), inset 0 1px 0 rgba(255,255,255,.72); } } html[data-theme="f"][data-color-theme="blue"] .department-identity>span.department-icon{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border:1px solid color-mix(in srgb, var(--accent) 17%, transparent); border-radius:12px; background:linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 92%, white), color-mix(in srgb, var(--accent-soft) 52%, transparent)); color:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); } html[data-theme="f"] .department-icon .department-glyph{ width:20px; height:20px; } html[data-theme="f"][data-color-theme="blue"] .department-card .department-status.active{ background:color-mix(in srgb, var(--accent-soft) 72%, transparent); color:var(--accent); } html[data-theme="f"][data-color-theme="blue"] .department-card .department-role-chip{ background:color-mix(in srgb, var(--accent-soft) 72%, transparent); border-color:color-mix(in srgb, var(--accent) 10%, transparent); } @media(max-width:1100px) { .department-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:720px) { .department-grid{ grid-template-columns:1fr; } } /* 核验凭证工作区：默认保持坐标操作在首屏，凭证通过 Tab / 抽屉承载。 */ .coordinate-governance-dialog:has(.evidence-drawer){ display:flex; flex-direction:column; overflow:hidden; } .coordinate-governance-dialog:has(.evidence-drawer) .coordinate-governance-body{ flex:1; min-height:0; overflow:hidden; } .coordinate-result{ position:relative; min-height:0; display:flex; flex-direction:column; overflow:hidden; } /* 右侧工作区页签（坐标结果 / 核验凭证）。 */ .coordinate-result-tabs button.active, .evidence-tab.active{ background:var(--accent-soft); color:var(--accent); font-weight:650; } .coordinate-result-tabs button.active::after, .evidence-tab.active::after{ position:absolute; right:8px; bottom:-8px; left:8px; height:2px; border-radius:4px; background:var(--accent); content:''; } .coordinate-result-tabs button.active span, .evidence-tab.active span{ background:var(--panel); color:var(--accent); } /* Tab 内容：只有当前面板占据空间，面板内部滚动。 */ .coordinate-result-panel.active, .coordinate-result-panel.is-active, .evidence-panel.active, .evidence-panel.is-active{ display:flex; flex-direction:column; } /* 凭证抽屉：覆盖右侧工作区，不再把长表单推到页面下方。 */ .evidence-drawer.open, .evidence-drawer.is-open{ opacity:1; pointer-events:auto; transform:translateX(0); } .evidence-drawer-mask.open, .evidence-drawer-mask.is-open{ opacity:1; pointer-events:auto; } /* 现有凭证区兼容样式：未切换为抽屉时也限制高度，避免撑高坐标栏。 */ .governance-evidence-box{ display:flex; min-height:0; max-height:310px; margin-top:13px; flex-direction:column; overflow:hidden; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); } .evidence-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex:0 0 auto; } .evidence-head > div{ min-width:0; } .evidence-head h4{ margin:0; font-size:11px; } .evidence-head span{ display:block; margin-top:3px; overflow:hidden; color:var(--text-3); font-size:9px; text-overflow:ellipsis; white-space:nowrap; } .evidence-head > strong{ flex:none; padding:3px 6px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:9px; font-weight:650; } .evidence-list{ display:grid; min-height:0; gap:6px; max-height:138px; margin-top:8px; overflow:auto; padding-right:2px; scrollbar-width:thin; } .evidence-card{ min-width:0; padding:8px; border:1px solid var(--row-line); border-radius:8px; background:var(--hover); } .evidence-card.current{ border-color:color-mix(in srgb,var(--accent) 27%,var(--border)); background:color-mix(in srgb,var(--accent-soft) 42%,var(--panel)); } .evidence-card header{ display:flex; align-items:flex-start; justify-content:space-between; gap:6px; } .evidence-card header > div{ display:flex; min-width:0; align-items:center; gap:5px; } .evidence-card header b{ overflow:hidden; color:var(--text-2); font-size:9px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; } .evidence-card header em{ flex:none; color:var(--text-3); font-size:9px; font-style:normal; } .evidence-type{ flex:none; padding:2px 4px; border-radius:4px; background:var(--accent-soft); color:var(--accent); font-size:9px; } .evidence-card small, .evidence-card p{ display:block; margin:4px 0 0; overflow:hidden; color:var(--text-3); font-size:9px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; } .evidence-card p{ color:var(--text-2); white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .evidence-card a{ display:block; margin-top:4px; overflow:hidden; color:var(--accent); font-size:9px; text-overflow:ellipsis; white-space:nowrap; } .evidence-card footer{ display:flex; justify-content:space-between; gap:6px; margin-top:6px; color:var(--text-3); font-size:9px; } .evidence-card footer span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .evidence-file-open{ margin-top:5px; padding:3px 6px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border)); border-radius:4px; background:var(--panel); color:var(--accent); font:inherit; font-size:9px; cursor:pointer; } .evidence-empty{ padding:12px 6px; color:var(--text-3); font-size:9px; text-align:center; } .evidence-form{ display:grid; gap:6px; min-height:0; margin-top:8px; overflow:auto; padding-top:8px; border-top:1px solid var(--row-line); } .evidence-form-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .evidence-form input, .evidence-form textarea{ box-sizing:border-box; width:100%; min-width:0; padding:7px 8px; border:1px solid var(--border); border-radius:8px; outline:0; background:var(--input-bg); color:var(--text); font:inherit; font-size:9px; } .evidence-form input{ height:30px; } .evidence-form textarea{ min-height:46px; resize:vertical; line-height:1.45; } .evidence-form input:focus, .evidence-form textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent); } .evidence-actions{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:5px; } .evidence-file-label{ display:inline-flex; align-items:center; gap:4px; min-height:26px; padding:0 7px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text-2); font-size:9px; cursor:pointer; } .evidence-file-label input{ display:none; } @media (max-width:720px) { .coordinate-governance-dialog:has(.evidence-drawer){ overflow:auto; } .coordinate-governance-dialog:has(.evidence-drawer) .coordinate-governance-body{ overflow:visible; } .evidence-form-row{ grid-template-columns:1fr; } .evidence-actions{ justify-content:stretch; } .evidence-actions .btn, .evidence-file-label{ flex:1; justify-content:center; } } /* 治理快捷说明：将常用处理结论做成轻量标签，减少输入与纵向占用。 */ .governance-quick-notes{ min-width: 0; margin: 6px 0 7px; padding: 7px 8px 8px; border: 1px solid color-mix(in srgb,var(--accent) 16%,var(--border)); border-radius: 8px; background: color-mix(in srgb,var(--accent-soft) 48%,var(--panel)); } .governance-quick-notes > div:first-child{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .governance-quick-notes > div:first-child b{ color: var(--text-2); font-size: 9px; font-weight: 650; } .governance-quick-notes > div:first-child span{ overflow: hidden; color: var(--text-3); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .governance-quick-note-list{ display: flex; flex-wrap: wrap; gap: 4px; max-height: 62px; margin-top: 6px; overflow: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--accent) 30%,var(--border)) transparent; } .governance-quick-note-list button{ display: inline-flex; min-height: 23px; align-items: center; max-width: 100%; padding: 3px 7px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); border-radius: 999px; background: var(--panel); color: var(--text-2); font: inherit; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: border-color .14s ease,background .14s ease,color .14s ease,box-shadow .14s ease; } .governance-quick-note-list button:hover{ border-color: color-mix(in srgb,var(--accent) 48%,var(--border)); background: var(--accent-soft); color: var(--accent); } .governance-quick-note-list button:focus-visible{ outline: 2px solid color-mix(in srgb,var(--accent) 42%,transparent); outline-offset: 1px; } .governance-quick-note-list button.active{ border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); box-shadow: 0 3px 8px color-mix(in srgb,var(--accent) 20%,transparent); } .governance-quick-note-list button.active:hover{ border-color: var(--accent-strong); background: var(--accent-strong); color: var(--accent-contrast); } /* 快捷说明插入到“处理说明”标签内部时，保持标签列与编辑列对齐。 */ .governance-edit label:has(.governance-quick-notes){ align-items: start; } .governance-edit label:has(.governance-quick-notes) > .governance-quick-notes, .governance-edit label:has(.governance-quick-notes) > textarea{ grid-column: 2; } .governance-edit label:has(.governance-quick-notes) > .governance-quick-notes{ grid-row: 1; } .governance-edit label:has(.governance-quick-notes) > textarea{ grid-row: 2; } .coordinate-result .governance-quick-notes{ width: 100%; box-sizing: border-box; } @media (max-width: 720px) { .governance-quick-notes{ padding: 7px; } .governance-quick-note-list{ max-height: 76px; } .governance-edit label:has(.governance-quick-notes){ display: block; } .governance-edit label:has(.governance-quick-notes) > .governance-quick-notes, .governance-edit label:has(.governance-quick-notes) > textarea{ margin-left: 0; } } /* 治理配置：规则列表与编辑抽屉（独立命名空间，避免影响治理任务页）。 */ .governance-config-page{ display:grid; gap:11px; min-width:0; padding:18px; } .governance-config-hero > .btn{ flex:none; margin-top:2px; } .governance-config-tabs{ display:flex; align-items:center; gap:3px; min-width:0; overflow:auto; padding:0 2px; border-bottom:1px solid var(--row-line); } .governance-config-tabs button{ position:relative; flex:none; min-height:34px; padding:5px 10px 7px; border:0; border-radius:8px 8px 0 0; background:transparent; color:var(--text-3); font:inherit; font-size:10px; cursor:pointer; } .governance-config-tabs button:hover{ background:var(--hover); color:var(--text-2); } .governance-config-tabs button.active, [data-active="true"].governance-config-tab{ color:var(--accent); font-weight:650; } .governance-config-tabs button.active::after, [data-active="true"].governance-config-tab::after{ position:absolute; right:8px; bottom:-1px; left:8px; height:2px; border-radius:4px; background:var(--accent); content:''; } .governance-config-toolbar{ display:flex; align-items:center; gap:7px; min-width:0; padding:2px 0 1px; } .governance-config-toolbar input, .governance-config-toolbar select{ box-sizing:border-box; min-width:0; height:32px; padding:0 9px; border:1px solid var(--border); border-radius:8px; outline:0; background:var(--input-bg); color:var(--text); font:inherit; font-size:10px; } .governance-config-toolbar input{ flex:1; min-width:180px; } .governance-config-toolbar input:focus, .governance-config-toolbar select:focus{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent); } .governance-config-toolbar > span{ flex:none; margin-left:auto; color:var(--text-3); font-size:9px; } .governance-config-table{ min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--panel); } .governance-config-row.head{ min-height:34px; background:var(--hover); color:var(--text-3); font-size:9px; } .governance-config-row:not(.head):hover{ background:color-mix(in srgb,var(--accent-soft) 35%,var(--panel)); } .governance-config-row .link{ padding:2px 0; font-size:9px; } .governance-config-status.off, .governance-config-status.disabled{ background:var(--hover); color:var(--text-3); } .governance-config-empty{ display:grid; min-height:150px; place-items:center; padding:24px; border:1px dashed var(--border); border-radius:12px; background:var(--panel); color:var(--text-3); font-size:10px; text-align:center; } .governance-config-pagination button.active{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); } /* 编辑抽屉：遮罩层独立存在，表单内容自带滚动，提交区固定在底部。 */ .governance-config-drawer-mask{ position:fixed; z-index:92; inset:0; background:rgba(20,35,52,.29); opacity:0; pointer-events:none; transition:opacity .18s ease; } .governance-config-drawer-mask.open, .governance-config-drawer-mask.is-open, .governance-config-drawer-mask[aria-hidden="false"]{ opacity:1; pointer-events:auto; } .governance-config-drawer-mask[hidden]{ display:none; } .governance-config-drawer{ position:fixed; z-index:93; top:0; right:0; bottom:0; display:flex; width:min(500px,92vw); flex-direction:column; overflow:hidden; border-left:1px solid var(--border); background:var(--panel); box-shadow:-20px 0 50px rgba(25,55,95,.16); opacity:0; pointer-events:none; transform:translateX(102%); transition:transform .2s ease,opacity .16s ease; } .governance-config-drawer.open, .governance-config-drawer.is-open, .governance-config-drawer[aria-hidden="false"]{ opacity:1; pointer-events:auto; transform:translateX(0); } .governance-config-drawer[hidden]{ display:none; } .governance-config-drawer > header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex:none; padding:17px 18px 13px; border-bottom:1px solid var(--row-line); } .governance-config-drawer > header h3{ margin:0; font-size:16px; } .governance-config-drawer > header p{ margin:4px 0 0; color:var(--text-3); font-size:9px; line-height:1.5; } .governance-config-drawer-close{ display:grid; flex:none; width:27px; height:27px; place-items:center; border:0; border-radius:8px; background:var(--hover); color:var(--text-2); font-size:18px; cursor:pointer; } .governance-config-drawer-close:hover{ background:var(--accent-soft); color:var(--accent); } .governance-config-drawer-body{ min-height:0; flex:1; overflow:auto; padding:14px 18px 18px; } .governance-config-form{ display:grid; gap:11px; } .governance-config-form > section, .governance-config-form > fieldset{ min-width:0; margin:0; padding:11px 12px; border:1px solid var(--border); border-radius:8px; background:var(--panel); } .governance-config-form > section > h4, .governance-config-form > fieldset > legend{ margin:0 0 9px; padding:0; color:var(--text-2); font-size:10px; font-weight:650; } .governance-config-form label{ display:grid; gap:5px; color:var(--text-3); font-size:9px; } .governance-config-form label + label{ margin-top:9px; } .governance-config-form input, .governance-config-form select, .governance-config-form textarea{ box-sizing:border-box; width:100%; min-width:0; padding:8px 9px; border:1px solid var(--border); border-radius:8px; outline:0; background:var(--input-bg); color:var(--text); font:inherit; font-size:10px; } .governance-config-form input, .governance-config-form select{ height:32px; } .governance-config-form textarea{ min-height:72px; resize:vertical; line-height:1.5; } .governance-config-form input:focus, .governance-config-form select:focus, .governance-config-form textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent); } .governance-config-form .form-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .governance-choice-field{ display:grid; gap:6px; color:var(--text-3); font-size:9px; } .governance-dataset-picker{ position:relative; min-width:0; } .governance-dataset-trigger{ display:flex; width:100%; min-height:34px; align-items:center; justify-content:space-between; gap:8px; padding:5px 8px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text-2); font:inherit; cursor:pointer; text-align:left; } .governance-dataset-trigger:hover, .governance-dataset-picker.open .governance-dataset-trigger{ border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 8%,transparent); } .governance-dataset-trigger > span{ display:flex; min-width:0; flex:1; flex-wrap:wrap; gap:4px; } .governance-dataset-trigger b, .governance-dataset-trigger em{ display:inline-flex; min-height:18px; align-items:center; max-width:145px; padding:1px 6px; overflow:hidden; border-radius:4px; background:var(--accent-soft); color:var(--accent); font-size:9px; font-style:normal; font-weight:600; text-overflow:ellipsis; white-space:nowrap; } .governance-dataset-trigger em{ background:var(--hover); color:var(--text-3); } .governance-dataset-trigger > i{ flex:none; color:var(--text-3); font-size:13px; font-style:normal; transition:transform .16s ease; } .governance-dataset-picker.open .governance-dataset-trigger > i{ transform:rotate(180deg); } .governance-dataset-menu{ position:absolute; z-index:4; top:calc(100% + 5px); right:0; left:0; display:none; max-height:188px; overflow:auto; padding:5px; border:1px solid var(--border); border-radius:8px; background:var(--panel); box-shadow:0 12px 25px rgba(27,52,82,.16); } .governance-dataset-picker.open .governance-dataset-menu{ display:grid; gap:2px; } .governance-dataset-option{ display:flex!important; align-items:center; gap:7px; min-height:29px; margin:0!important; padding:0 7px; border-radius:4px; color:var(--text-2)!important; cursor:pointer; } .governance-dataset-option:hover{ background:var(--hover); } .governance-dataset-option.all{ margin-bottom:3px!important; border-bottom:1px solid var(--row-line); border-radius:4px 4px 0 0; color:var(--accent)!important; font-weight:650; } .governance-dataset-option input, .governance-choice-card input{ position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0,0,0,0); } .governance-dataset-option i{ display:grid; width:14px; height:14px; flex:none; place-items:center; border:1px solid var(--border-strong); border-radius:4px; background:var(--panel); } .governance-dataset-option input:checked + i{ border-color:var(--accent); background:var(--accent); } .governance-dataset-option input:checked + i::after{ color:#fff; content:'✓'; font-size:10px; font-style:normal; } .governance-field-hint{ display:block; margin-top:5px; color:var(--text-3); font-size:9px; line-height:1.45; } .governance-choice-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .governance-choice-card{ display:flex!important; align-items:center; gap:7px; min-height:35px; margin:0!important; padding:0 9px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text-2)!important; cursor:pointer; transition:border-color .14s ease,background .14s ease,color .14s ease; } .governance-choice-card:hover{ border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); } .governance-choice-card i{ display:grid; width:15px; height:15px; flex:none; place-items:center; border:1px solid var(--border-strong); border-radius:50%; color:transparent; font-size:9px; font-style:normal; font-weight:700; } .governance-choice-card input:checked ~ i, .governance-choice-card:has(input:checked) i{ border-color:var(--accent); background:var(--accent); color:#fff; } .governance-choice-card:has(input:checked){ border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); background:var(--accent-soft); color:var(--accent)!important; } .governance-config-scope-tags span.active{ border-color:color-mix(in srgb,var(--accent) 42%,var(--border)); background:var(--accent-soft); color:var(--accent); } .governance-config-toggle{ display:flex!important; align-items:center; justify-content:space-between; gap:9px; min-height:31px; } .governance-config-toggle > span{ color:var(--text-2); font-size:10px; } .governance-config-toggle input{ position:absolute; width:1px!important; height:1px!important; overflow:hidden; clip:rect(0,0,0,0); } .governance-config-toggle i{ position:relative; display:block; width:34px; height:19px; flex:none; border-radius:999px; background:var(--border-strong); cursor:pointer; transition:background .15s ease; } .governance-config-toggle i::after{ position:absolute; top:3px; left:3px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(25,45,65,.18); content:''; transition:transform .15s ease; } .governance-config-toggle input:checked + i{ background:var(--accent); } .governance-config-toggle input:checked + i::after{ transform:translateX(15px); } .governance-config-drawer > footer{ display:flex; align-items:center; justify-content:flex-end; gap:7px; flex:none; padding:11px 18px; border-top:1px solid var(--row-line); background:var(--panel); } .governance-config-drawer > footer > span{ margin-right:auto; color:var(--text-3); font-size:9px; } @media (max-width: 900px) { .governance-config-page{ padding:14px; } } @media (max-width: 720px) { .governance-config-page{ padding:11px; } .governance-config-hero > .btn{ margin-top:11px; } .governance-config-toolbar{ flex-wrap:wrap; } .governance-config-toolbar input{ flex-basis:100%; } .governance-config-toolbar > span{ margin-left:0; } .governance-config-table{ overflow:auto; } .governance-config-drawer{ width:100%; border-left:0; } .governance-config-drawer-body{ padding:12px; } .governance-config-drawer > header, .governance-config-drawer > footer{ padding-right:13px; padding-left:13px; } .governance-config-form .form-row{ grid-template-columns:1fr; } .governance-choice-grid{ grid-template-columns:1fr; } } @media (prefers-reduced-motion: reduce) { .governance-config-drawer, .governance-config-drawer-mask, .governance-config-toggle i, .governance-config-toggle i::after{ transition:none; } } /* 治理弹窗组件兜底：避免旧缓存或通用 button 规则让控件退化为浏览器默认样式。 */ /* ========== 系统设置 ========== */ .coordinate-governance-dialog .coordinate-result-tabs{ display: inline-flex; width: fit-content; min-height: 32px; align-items: center; gap: 2px; margin: 0 0 12px; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); } .coordinate-governance-dialog .coordinate-result-tabs > button{ appearance: none; -webkit-appearance: none; position: relative; display: inline-flex; min-width: 76px; min-height: 28px; align-items: center; justify-content: center; gap: 5px; margin: 0; padding: 0 10px; border: 0; border-radius: 8px; outline: 0; background: transparent; box-shadow: none; color: var(--text-3); font: inherit; font-size: 10px; font-weight: 550; line-height: 1; white-space: nowrap; cursor: pointer; } .coordinate-governance-dialog .coordinate-result-tabs > button::after{ display: none; } .coordinate-governance-dialog .coordinate-result-tabs > button:hover{ background: var(--hover); color: var(--text-2); } .coordinate-governance-dialog .coordinate-result-tabs > button.active{ background: var(--panel); color: var(--accent); font-weight: 680; box-shadow: 0 1px 4px rgba(28, 90, 176, .12); } .coordinate-governance-dialog .coordinate-result-tabs > button > span{ display: inline-grid; min-width: 16px; height: 16px; place-items: center; padding: 0 4px; border: 0; border-radius: 999px; background: var(--hover); color: var(--text-3); font-size: 9px; line-height: 16px; } .coordinate-governance-dialog .coordinate-result-tabs > button.active > span{ background: var(--accent-soft); color: var(--accent); } .coordinate-governance-dialog .coordinate-result-panel{ padding-top: 1px; } .coordinate-governance-dialog .governance-quick-notes{ box-sizing: border-box; width: 100%; margin: 6px 0 9px; padding: 8px 9px 9px; border: 1px solid color-mix(in srgb, var(--accent) 17%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--accent-soft) 50%, var(--panel)); } .coordinate-governance-dialog .governance-quick-notes > div:first-child{ display: flex; min-height: 17px; align-items: center; justify-content: space-between; gap: 8px; } .coordinate-governance-dialog .governance-quick-notes > div:first-child b{ color: var(--text-2); font-size: 9px; font-weight: 680; } .coordinate-governance-dialog .governance-quick-notes > div:first-child span{ color: var(--text-3); font-size: 9px; white-space: nowrap; } .coordinate-governance-dialog .governance-quick-note-list{ display: flex; max-height: 56px; flex-wrap: wrap; align-content: flex-start; gap: 5px; margin-top: 7px; overflow-x: hidden; overflow-y: auto; } .coordinate-governance-dialog .governance-quick-note-list > button{ appearance: none; -webkit-appearance: none; display: inline-flex; min-height: 24px; align-items: center; margin: 0; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 999px; outline: 0; background: var(--panel); box-shadow: none; color: var(--text-2); font: inherit; font-size: 9px; font-weight: 520; line-height: 1.2; white-space: nowrap; cursor: pointer; } .coordinate-governance-dialog .governance-quick-note-list > button:hover{ border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); background: var(--accent-soft); color: var(--accent); } .coordinate-governance-dialog .governance-quick-note-list > button.active{ border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 18%, transparent); } .coordinate-governance-dialog #coordinateGovernanceNote{ margin-top: 0; } /* 用户头像 */ .settings-user-identity{ display:flex; align-items:center; gap:8px; }.settings-user-identity b{ color:var(--text); font-size:11px; } .user-table-avatar, .profile-avatar{ display:grid; width:27px; height:27px; flex:none; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); border-radius:50%; background:linear-gradient(145deg,var(--accent-soft),#dbe9ff); color:var(--accent); font-size:10px; font-weight:700; }.user-table-avatar img, .profile-avatar img{ width:100%; height:100%; object-fit:cover; } .profile-mask{ position:fixed; z-index:310; inset:0; display:grid; place-items:center; padding:16px; background:rgba(21,38,60,.32); }.profile-dialog{ position:relative; width:min(400px,100%); max-height:calc(100vh - 32px); overflow:auto; padding:25px; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); border-radius:16px; background:var(--panel); box-shadow:0 22px 55px rgba(27,54,88,.2); text-align:center; }.profile-close{ position:absolute; top:11px; right:11px; display:grid; width:27px; height:27px; place-items:center; border:0; border-radius:8px; background:var(--hover); color:var(--text-2); font-size:18px; cursor:pointer; }.profile-close:hover{ background:var(--accent-soft); color:var(--accent); }.profile-avatar-wrap{ position:relative; width:78px; height:78px; margin:0 auto 13px; }.profile-avatar{ width:76px; height:76px; border:2px solid var(--panel); outline:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); font-size:26px; box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 14%,transparent); }.profile-avatar-edit{ position:absolute; right:-9px; bottom:-3px; padding:5px 7px; border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border)); border-radius:999px; background:var(--panel); box-shadow:0 4px 12px rgba(38,67,103,.12); color:var(--accent); font-size:9px; font-weight:650; cursor:pointer; }.profile-dialog h3{ margin:0; color:var(--text); font-size:16px; }.profile-dialog > p{ margin:5px 0 16px; color:var(--text-3); font-size:9px; }.profile-file-hint{ padding:9px; border-radius:8px; background:var(--hover); color:var(--text-3); font-size:9px; line-height:1.5; }.profile-actions{ display:flex; justify-content:flex-end; gap:7px; margin-top:16px; } .profile-info{ margin-top:12px; padding:11px 12px; border:1px solid var(--border); border-radius:8px; text-align:left; }.profile-info h4{ margin:0 0 9px; color:var(--text-2); font-size:10px; }.profile-info dl{ display:grid; grid-template-columns:72px 1fr; gap:8px 10px; margin:0; font-size:9px; }.profile-info dt{ color:var(--text-3); }.profile-info dd{ margin:0; color:var(--text-2); }.profile-info dd span{ padding:2px 6px; border-radius:4px; background:var(--accent-soft); color:var(--accent); font-size:9px; } .profile-password{ margin-top:10px; border:1px solid var(--border); border-radius:8px; text-align:left; }.profile-password summary{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; color:var(--text-2); font-size:9px; font-weight:650; cursor:pointer; list-style:none; }.profile-password summary::-webkit-details-marker{ display:none; }.profile-password summary i{ font-style:normal; transition:transform .15s ease; }.profile-password[open] summary i{ transform:rotate(90deg); }.profile-password > form{ display:grid; gap:8px; padding:0 12px 12px; border-top:1px solid var(--row-line); }.profile-password label{ display:grid; gap:5px; margin-top:9px; color:var(--text-3); font-size:9px; }.profile-password input{ box-sizing:border-box; width:100%; height:32px; padding:0 9px; border:1px solid var(--border); border-radius:8px; outline:0; background:var(--input-bg); color:var(--text); font:inherit; font-size:9px; }.profile-password .btn{ justify-self:end; } .settings-avatar-editor{ display:grid!important; grid-template-columns:52px auto; grid-template-rows:auto auto; align-items:center; justify-content:start!important; gap:3px 10px!important; margin:0 0 13px!important; padding:10px; border:1px solid var(--row-line); border-radius:8px; background:var(--hover); }.settings-avatar-editor > span{ grid-row:1/3; display:grid; width:50px; height:50px; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border)); border-radius:50%; background:linear-gradient(145deg,var(--accent-soft),#dbe9ff); color:var(--accent); font-size:16px; font-weight:700; }.settings-avatar-editor > span img{ width:100%; height:100%; object-fit:cover; }.settings-avatar-editor label{ width:max-content; margin:0!important; padding:5px 9px; border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border)); border-radius:8px; background:var(--panel); color:var(--accent)!important; font-size:9px !important; font-weight:650; cursor:pointer; }.settings-avatar-editor small{ color:var(--text-3); font-size:9px; } /* Avatar crop editor: a focused, dark canvas keeps the image adjustment separate from account settings. */ /* ========== feedback ========== */ .avatar-crop-mask{ position:fixed; z-index:360; inset:0; display:grid; box-sizing:border-box; place-items:center; padding:24px; background:var(--mask-bg); backdrop-filter:blur(8px) saturate(115%); -webkit-backdrop-filter:blur(8px) saturate(115%); } .avatar-crop-dialog{ --avatar-crop-diameter:240px; display:flex; box-sizing:border-box; width:min(500px,calc(100vw - 48px)); height:min(560px,calc(100dvh - 48px)); min-height:360px; flex-direction:column; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); border-radius:16px; background:var(--panel); color:var(--text); box-shadow:0 22px 55px rgba(27,54,88,.2); } .avatar-crop-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex:none; padding:20px 22px 16px; border-bottom:1px solid var(--row-line); } .avatar-crop-eyebrow{ color:var(--accent); font-size:10px; font-weight:750; letter-spacing:.16em; } .avatar-crop-header h2{ margin:5px 0 3px; color:var(--text); font-size:18px; font-weight:650; letter-spacing:-.02em; } .avatar-crop-header p{ margin:0; color:var(--text-3); font-size:11px; line-height:1.45; } .avatar-crop-close{ display:grid; width:32px; height:32px; flex:none; place-items:center; border:1px solid var(--border); border-radius:12px; background:var(--hover); color:var(--text-2); font-size:20px; line-height:1; cursor:pointer; transition:background .16s ease,color .16s ease,transform .16s ease; } .avatar-crop-close:hover{ background:var(--accent-soft); color:var(--accent); transform:translateY(-1px); } .avatar-crop-stage{ position:relative; flex:1; min-height:0; overflow:hidden; background:color-mix(in srgb,var(--hover) 72%,var(--panel)); cursor:grab; outline:none; touch-action:none; } .avatar-crop-stage.is-dragging{ cursor:grabbing; } .avatar-crop-image{ position:absolute; z-index:0; top:50%; left:50%; display:block; width:100%; height:100%; max-width:none; object-fit:contain; pointer-events:none; user-select:none; transform:translate(-50%,-50%); transform-origin:center; } .avatar-crop-canvas{ position:absolute; z-index:-1; inset:0; display:block; width:100%; height:100%; pointer-events:none; } .avatar-crop-shade{ position:absolute; z-index:1; inset:0; pointer-events:none; background:radial-gradient(circle at center,transparent 0 calc(var(--avatar-crop-diameter) / 2 - 1px),rgba(20,34,58,.04) calc(var(--avatar-crop-diameter) / 2),rgba(20,34,58,.18) calc(var(--avatar-crop-diameter) / 2 + 2px),rgba(20,34,58,.34) 100%); } .avatar-crop-focus{ position:absolute; z-index:2; top:50%; left:50%; width:var(--avatar-crop-diameter); aspect-ratio:1; border:1px solid color-mix(in srgb,var(--action-primary,var(--accent)) 66%,white); border-radius:50%; box-shadow:0 0 0 1px color-mix(in srgb,var(--action-primary,var(--accent)) 24%,transparent),0 0 24px rgba(27,54,88,.14); transform:translate(-50%,-50%); pointer-events:none; } .avatar-crop-corner{ position:absolute; z-index:3; width:19px; height:19px; border-color:color-mix(in srgb,var(--action-primary,var(--accent)) 72%,white); border-style:solid; pointer-events:none; } .avatar-crop-corner.top-left{ top:calc(50% - var(--avatar-crop-diameter) / 2 - 1px); left:calc(50% - var(--avatar-crop-diameter) / 2 - 1px); border-width:2px 0 0 2px; border-radius:4px 0 0 0; } .avatar-crop-corner.top-right{ top:calc(50% - var(--avatar-crop-diameter) / 2 - 1px); right:calc(50% - var(--avatar-crop-diameter) / 2 - 1px); border-width:2px 2px 0 0; border-radius:0 4px 0 0; } .avatar-crop-corner.bottom-left{ bottom:calc(50% - var(--avatar-crop-diameter) / 2 - 1px); left:calc(50% - var(--avatar-crop-diameter) / 2 - 1px); border-width:0 0 2px 2px; border-radius:0 0 0 4px; } .avatar-crop-corner.bottom-right{ right:calc(50% - var(--avatar-crop-diameter) / 2 - 1px); bottom:calc(50% - var(--avatar-crop-diameter) / 2 - 1px); border-width:0 2px 2px 0; border-radius:0 0 4px 0; } .avatar-crop-controls{ display:flex; align-items:center; gap:8px; flex:none; padding:10px 22px; border-top:1px solid var(--row-line); background:var(--hover); color:var(--text-2); font-size:10px; } .avatar-crop-zoom{ width:min(250px,32vw); height:4px; accent-color:var(--action-primary,var(--accent)); cursor:pointer; } .avatar-crop-zoom-button{ display:grid; width:26px; height:26px; place-items:center; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text-2); font-size:16px; line-height:1; cursor:pointer; } .avatar-crop-zoom-button:hover{ background:var(--accent-soft); color:var(--accent); } .avatar-crop-zoom-value{ min-width:42px; color:var(--text-2); font-size:11px; font-variant-numeric:tabular-nums; text-align:right; } .avatar-crop-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; padding:13px 22px 16px; border-top:1px solid var(--row-line); background:var(--panel); } .avatar-crop-footer > span{ color:var(--text-3); font-size:10px; } .avatar-crop-footer > div{ display:flex; gap:9px; } .avatar-crop-footer .btn{ min-width:78px; min-height:36px; padding:7px 15px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text-2); font:inherit; font-size:12px; cursor:pointer; } .avatar-crop-footer .btn:hover{ background:var(--accent-soft); color:var(--accent); } .avatar-crop-footer .btn.primary{ border-color:var(--action-primary,var(--accent)); background:var(--action-primary,var(--accent)); color:#fff; box-shadow:0 2px 4px color-mix(in srgb,var(--action-primary,var(--accent)) 18%,transparent); } .avatar-crop-footer .btn.primary:hover{ background:var(--action-primary-hover,var(--accent-strong)); color:#fff; } .avatar-crop-footer .btn:disabled{ opacity:.58; cursor:wait; } @media (max-width:640px) { .avatar-crop-mask{ padding:0; } .avatar-crop-dialog{ width:100%; height:100dvh; min-height:0; border:0; border-radius:0; } .avatar-crop-header{ padding:20px 18px 14px; } .avatar-crop-header h2{ font-size:20px; } .avatar-crop-controls{ padding-inline:18px; } .avatar-crop-footer{ padding:14px 18px 18px; } .avatar-crop-footer > span{ display:none; } .avatar-crop-footer > div{ width:100%; } .avatar-crop-footer .btn{ flex:1; } } /* 数据反馈中心 */ .feedback-page{ display:grid; gap:12px; padding:18px; } .feedback-drawer > header > div > span{ color:var(--accent); font-size:9px; font-weight:700; letter-spacing:.13em; } .feedback-row.head{ min-height:34px; background:var(--hover); color:var(--text-3); font-size:9px; } .feedback-row:not(.head):hover{ background:color-mix(in srgb,var(--accent-soft) 28%,var(--panel)); } .feedback-issue.p0{ background:#fff0ee; color:#c95e52; }.feedback-issue.p2{ background:var(--hover); color:var(--text-3); } .feedback-status.pending_confirmation{ background:#fff5df; color:#a97422; }.feedback-status.pending_assignment{ background:#eef3ff; color:#5474a8; }.feedback-status.processing{ background:var(--accent-soft); color:var(--accent); }.feedback-status.reviewing{ background:#f3efff; color:#7760ad; }.feedback-status.completed{ background:#eaf7f1; color:#368467; }.feedback-status.rejected, .feedback-status.duplicate{ background:var(--hover); color:var(--text-3); } .feedback-empty{ display:grid; min-height:180px; place-items:center; border:1px dashed var(--border); border-radius:12px; background:var(--panel); color:var(--text-3); font-size:10px; } .feedback-drawer-mask{ position:fixed; z-index:96; inset:0; display:grid; justify-items:end; background:rgba(20,35,52,.3); } .feedback-drawer{ display:flex; width:min(540px,94vw); height:100vh; flex-direction:column; overflow:hidden; border-left:1px solid var(--border); background:var(--panel); box-shadow:-20px 0 50px rgba(25,55,95,.18); animation:feedback-drawer-in .18s ease-out; } @keyframes feedback-drawer-in { from { opacity:.5; transform:translateX(30px); } to { opacity:1; transform:none; } } .feedback-drawer > header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:17px 18px 13px; border-bottom:1px solid var(--row-line); } .feedback-drawer > header h3{ margin:4px 0; color:var(--text); font-size:16px; }.feedback-drawer > header p{ margin:0; color:var(--text-3); font-size:9px; } .feedback-drawer > header button{ display:grid; width:27px; height:27px; place-items:center; border:0; border-radius:8px; background:var(--hover); color:var(--text-2); font-size:18px; cursor:pointer; } .feedback-drawer form{ min-height:0; flex:1; overflow:auto; } .feedback-form{ display:grid; gap:10px; padding:15px 18px 20px; } .feedback-form label{ display:grid; gap:5px; color:var(--text-3); font-size:9px; } .feedback-form input, .feedback-form select, .feedback-form textarea{ box-sizing:border-box; width:100%; min-width:0; padding:8px 9px; border:1px solid var(--border); border-radius:8px; outline:0; background:var(--input-bg); color:var(--text); font:inherit; font-size:10px; } .feedback-form input, .feedback-form select{ height:33px; }.feedback-form textarea{ resize:vertical; line-height:1.5; } .feedback-drawer > footer{ display:flex; align-items:center; justify-content:flex-end; gap:7px; padding:11px 18px; border-top:1px solid var(--row-line); }.feedback-drawer > footer > span{ margin-right:auto; color:var(--text-3); font-size:9px; }.feedback-assign-card > .btn{ margin-right:6px; } @media (max-width:640px) { .feedback-page{ padding:11px; }.feedback-drawer{ width:100%; } } /* 数据版本中心：直接汇总来源、版本、治理和交付记录。 */ .data-versions-page{ display:grid; gap:13px; padding:14px; background:var(--bg); } .data-versions-hero{ display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:112px; padding:19px 23px; border:1px solid color-mix(in srgb,var(--accent) 16%,var(--border)); border-radius:12px; background:linear-gradient(112deg,color-mix(in srgb,var(--accent-soft) 74%,var(--panel)),var(--panel) 70%); } .data-versions-hero > div:first-child{ min-width:0; }.data-versions-hero > div > span, .data-version-domains > header span, .data-version-events > header span{ color:var(--accent); font-size:9px; font-weight:700; letter-spacing:0; } .data-versions-hero h2{ margin:6px 0 5px; color:var(--text); font-size:22px; }.data-versions-hero p{ max-width:710px; margin:0; color:var(--text-3); font-size:11px; line-height:1.65; } .data-versions-hero-badge{ display:grid; flex:0 0 166px; gap:4px; padding:13px 15px; border-left:1px solid color-mix(in srgb,var(--accent) 18%,var(--border)); }.data-versions-hero-badge small, .data-versions-hero-badge span{ color:var(--text-3); font-size:9px; }.data-versions-hero-badge b{ overflow:hidden; color:var(--text); font-size:14px; text-overflow:ellipsis; white-space:nowrap; } .data-versions-kpis{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--panel); }.data-versions-kpis > div{ min-width:0; padding:13px 15px; border-right:1px solid var(--row-line); }.data-versions-kpis > div:last-child{ border-right:0; }.data-versions-kpis small, .data-versions-kpis span{ display:block; color:var(--text-3); font-size:9px; }.data-versions-kpis b{ display:block; margin:5px 0 3px; color:var(--text); font-size:20px; } .data-version-domains, .data-version-events{ overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--panel); }.data-version-domains > header, .data-version-events > header{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 18px; border-bottom:1px solid var(--row-line); }.data-version-domains > header div, .data-version-events > header div{ min-width:0; }.data-version-domains h3, .data-version-events h3{ margin:4px 0 0; color:var(--text); font-size:14px; }.data-version-domains p, .data-version-events p{ margin:4px 0 0; color:var(--text-3); font-size:10px; } .data-version-domain-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:13px; }.data-version-domain-card{ display:grid; gap:10px; min-width:0; padding:13px; border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text); text-align:left; font:inherit; cursor:pointer; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease; }.data-version-domain-card:hover, .data-version-domain-card.active{ border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); background:color-mix(in srgb,var(--accent-soft) 36%,var(--panel)); box-shadow:0 6px 17px rgba(34,79,145,.06); } .data-version-domain-title{ display:flex; align-items:center; gap:9px; min-width:0; }.data-version-domain-title > span{ display:grid; flex:0 0 31px; width:31px; height:31px; place-items:center; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:700; }.data-version-domain-title > div{ display:grid; min-width:0; gap:3px; }.data-version-domain-title b, .data-version-domain-title small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.data-version-domain-title b{ color:var(--text); font-size:12px; }.data-version-domain-title small{ color:var(--text-3); font-size:9px; }.data-version-status{ margin-left:auto; padding:3px 6px; border-radius:4px; font-size:9px; font-style:normal; white-space:nowrap; }.data-version-status.active{ background:#e9f6ee; color:#287c5b; }.data-version-status.updating{ background:var(--accent-soft); color:var(--accent); }.data-version-status.governing{ background:#fff4dc; color:#a87622; }.data-version-status.overdue{ background:#ffefed; color:#bd5b50; } .data-version-domain-card > p{ overflow:hidden; margin:0; color:var(--text-3); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.data-version-domain-metrics{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--row-line); border-bottom:1px solid var(--row-line); }.data-version-domain-metrics span{ display:grid; gap:3px; min-width:0; padding:8px 5px; border-right:1px solid var(--row-line); color:var(--text-3); font-size:9px; text-align:center; }.data-version-domain-metrics span:last-child{ border-right:0; }.data-version-domain-metrics b{ color:var(--text-2); font-size:11px; }.data-version-domain-card footer{ display:flex; align-items:center; gap:8px; min-width:0; color:var(--text-3); font-size:9px; }.data-version-domain-card footer span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.data-version-domain-card footer i{ margin-left:auto; color:var(--accent); font-size:18px; font-style:normal; line-height:.7; } .data-version-event-list{ padding:1px 18px; }.data-version-event{ display:grid; grid-template-columns:9px 130px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:59px; border-bottom:1px solid var(--row-line); }.data-version-event:last-child{ border-bottom:0; }.data-version-event > i{ width:8px; height:8px; border-radius:50%; background:var(--text-3); }.data-version-event.import > i{ background:var(--accent); }.data-version-event.repair > i{ background:#39a475; }.data-version-event.delivery > i{ background:#8b69cb; }.data-version-event-time{ color:var(--text-3); font-size:9px; }.data-version-event-main{ display:grid; min-width:0; gap:3px; }.data-version-event-main span{ color:var(--accent); font-size:9px; }.data-version-event-main b{ color:var(--text-2); font-size:11px; }.data-version-event-main p{ overflow:hidden; margin:0; color:var(--text-3); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.data-version-event > em{ max-width:120px; overflow:hidden; padding:3px 6px; border:1px solid var(--border); border-radius:4px; color:var(--text-3); font-size:9px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }.data-version-events .data-pagination{ margin:0; padding:10px 18px; border-top:1px solid var(--row-line); }.data-version-empty{ padding:36px 18px; color:var(--text-3); font-size:11px; text-align:center; } @media (max-width:900px) { .data-versions-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }.data-versions-kpis > div:nth-child(3){ border-right:0; }.data-versions-kpis > div:nth-child(-n+3){ border-bottom:1px solid var(--row-line); }.data-version-event{ grid-template-columns:9px 120px minmax(0,1fr); }.data-version-event > em{ display:none; } } @media (max-width:720px) { .data-versions-page{ padding:10px; }.data-versions-hero{ align-items:flex-start; flex-direction:column; }.data-versions-hero-badge{ width:100%; box-sizing:border-box; border-top:1px solid var(--row-line); border-left:0; }.data-versions-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }.data-versions-kpis > div{ border-bottom:1px solid var(--row-line); }.data-versions-kpis > div:nth-child(2n){ border-right:0; }.data-version-domain-grid{ grid-template-columns:1fr; }.data-version-events > header{ align-items:flex-start; flex-direction:column; gap:6px; }.data-version-event{ grid-template-columns:8px minmax(0,1fr); gap:8px; padding:10px 0; }.data-version-event-time{ grid-column:2; grid-row:1; }.data-version-event-main{ grid-column:2; }.data-version-event > i{ grid-row:1 / span 2; }.data-version-events .data-pagination{ padding-inline:10px; } } /* 数据溯源中心：来源、血缘、版本共用一个轻量页签容器。 */ .data-version-tabs{ display:flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--border); border-radius:12px; background:var(--panel); } .data-version-tab{ min-width:106px; padding:9px 14px; border:0; border-radius:8px; background:transparent; color:var(--text-3); font:inherit; font-size:11px; cursor:pointer; transition:background .15s ease,color .15s ease,box-shadow .15s ease; } .data-version-tab:hover{ color:var(--accent); background:var(--accent-soft); }.data-version-tab.active{ color:var(--accent); background:var(--accent-soft); box-shadow:0 2px 8px rgba(34,79,145,.08); font-weight:700; } .data-source-panel, .data-lineage-panel{ overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--panel); }.data-source-panel > header, .data-lineage-panel > header{ padding:15px 18px; border-bottom:1px solid var(--row-line); }.data-source-panel > header span, .data-lineage-panel > header span{ color:var(--accent); font-size:9px; font-weight:700; }.data-source-panel h3, .data-lineage-panel h3{ margin:5px 0 0; color:var(--text); font-size:14px; }.data-source-panel header p, .data-lineage-panel header p{ margin:4px 0 0; color:var(--text-3); font-size:10px; } .data-source-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:13px; }.data-source-card{ display:grid; gap:9px; min-width:0; padding:13px; border:1px solid var(--border); border-radius:12px; background:var(--panel); }.data-source-card-head{ display:flex; align-items:center; gap:9px; min-width:0; }.data-source-mark{ display:grid; flex:0 0 31px; width:31px; height:31px; place-items:center; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:700; }.data-source-card-head > div{ display:grid; min-width:0; gap:3px; }.data-source-card-head b, .data-source-card-head small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.data-source-card-head b{ color:var(--text); font-size:12px; }.data-source-card-head small{ color:var(--text-3); font-size:9px; }.data-source-card-head em{ margin-left:auto; padding:3px 7px; border-radius:4px; font-size:9px; font-style:normal; white-space:nowrap; }.data-source-status.active{ background:#e9f6ee; color:#287c5b; }.data-source-status.pending{ background:#fff4dc; color:#a87622; }.data-source-card h4{ overflow:hidden; margin:0; color:var(--text-2); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.data-source-card dl{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; border-top:1px solid var(--row-line); border-bottom:1px solid var(--row-line); }.data-source-card dl > div{ min-width:0; padding:8px 7px; border-right:1px solid var(--row-line); }.data-source-card dl > div:last-child{ border-right:0; }.data-source-card dt{ color:var(--text-3); font-size:9px; }.data-source-card dd{ overflow:hidden; margin:3px 0 0; color:var(--text-2); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.data-source-reference{ overflow:hidden; margin:0; color:var(--text-3); font-size:9px; text-overflow:ellipsis; white-space:nowrap; } .data-lineage-list{ display:grid; gap:11px; padding:13px; }.data-lineage-card{ min-width:0; padding:13px; border:1px solid var(--border); border-radius:12px; background:var(--panel); }.data-lineage-card-title{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.data-lineage-card-title > div{ display:grid; gap:3px; min-width:0; }.data-lineage-card-title b{ color:var(--text); font-size:12px; }.data-lineage-card-title small{ color:var(--text-3); font-size:9px; }.data-lineage-card-title em{ flex:0 0 auto; }.data-lineage-track{ display:flex; align-items:stretch; gap:7px; margin-top:12px; overflow-x:auto; padding-bottom:2px; }.data-lineage-node{ display:grid; flex:1 1 150px; min-width:128px; min-height:74px; align-content:center; gap:4px; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); }.data-lineage-node small{ color:var(--text-3); font-size:9px; }.data-lineage-node b{ overflow:hidden; color:var(--text-2); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.data-lineage-node span{ overflow:hidden; color:var(--text-3); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.data-lineage-node.source{ border-color:color-mix(in srgb,var(--accent) 28%,var(--border)); background:color-mix(in srgb,var(--accent-soft) 40%,var(--panel)); }.data-lineage-node.process{ border-color:#d9e3f2; }.data-lineage-node.dataset{ border-color:#b9d7ca; background:#f4fbf7; }.data-lineage-node.downstream{ border-color:#ddd4f2; background:#faf8ff; }.data-lineage-arrow{ align-self:center; flex:0 0 auto; color:var(--accent); font-size:18px; font-style:normal; }.data-lineage-mapping{ margin-top:10px; border-top:1px solid var(--row-line); }.data-lineage-mapping summary{ padding-top:10px; color:var(--accent); font-size:9px; cursor:pointer; }.data-lineage-mapping > div{ display:grid; gap:5px; margin-top:8px; }.data-lineage-mapping p{ display:grid; grid-template-columns:minmax(100px,1fr) 20px minmax(100px,1fr) 100px; align-items:center; gap:7px; margin:0; color:var(--text-3); font-size:9px; }.data-lineage-mapping p b{ overflow:hidden; color:var(--text-2); text-overflow:ellipsis; white-space:nowrap; }.data-lineage-mapping p i{ color:var(--accent); font-size:12px; font-style:normal; text-align:center; }.data-lineage-mapping p span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:720px) { .data-version-tabs{ overflow:auto; }.data-version-tab{ min-width:88px; padding-inline:10px; }.data-source-grid{ grid-template-columns:1fr; }.data-source-card dl{ grid-template-columns:1fr; }.data-source-card dl > div{ border-right:0; border-bottom:1px solid var(--row-line); }.data-source-card dl > div:last-child{ border-bottom:0; }.data-lineage-track{ flex-direction:column; overflow:visible; }.data-lineage-arrow{ align-self:center; transform:rotate(90deg); }.data-lineage-node{ flex-basis:auto; min-width:0; }.data-lineage-mapping p{ grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); }.data-lineage-mapping p span{ grid-column:1 / -1; } } .quality-rule-summary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 13px 12px; }.quality-rule-summary > div{ padding:11px 13px; border:1px solid var(--border); border-radius:8px; background:var(--accent-soft); }.quality-rule-summary small, .quality-rule-summary b{ display:block; }.quality-rule-summary small{ color:var(--text-3); font-size:9px; }.quality-rule-summary b{ margin-top:4px; color:var(--accent); font-size:20px; }.quality-rule-list{ display:grid; gap:9px; padding:0 13px 13px; }.quality-rule-card{ display:grid; gap:9px; padding:13px; border:1px solid var(--border); border-radius:12px; background:var(--panel); }.quality-rule-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }.quality-rule-head > div{ display:flex; align-items:center; gap:8px; min-width:0; }.quality-rule-head b{ color:var(--text); font-size:12px; }.quality-rule-head small{ color:var(--text-3); font-size:9px; }.quality-rule-head em{ color:#b3544b; font-size:9px; font-style:normal; white-space:nowrap; }.quality-rule-card > p{ margin:0; color:var(--text-3); font-size:10px; line-height:1.6; }.quality-rule-domains{ display:grid; gap:5px; padding-top:8px; border-top:1px solid var(--row-line); }.quality-rule-domains > div{ display:flex; align-items:baseline; gap:9px; min-width:0; }.quality-rule-domains b{ flex:0 0 72px; color:var(--text-2); font-size:9px; }.quality-rule-domains span{ overflow:hidden; color:var(--text-3); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.quality-rule-empty{ color:var(--text-3); font-size:9px; }.quality-rule-card footer{ display:flex; justify-content:space-between; gap:8px; color:var(--text-3); font-size:9px; }.quality-rule-principles{ margin:0 13px 13px; padding:10px 12px; border:1px solid var(--row-line); border-radius:8px; }.quality-rule-principles summary{ color:var(--accent); font-size:9px; cursor:pointer; }.quality-rule-principles .trust-rule-flow{ margin-top:10px; }.trust-rules > header{ align-items:center; }.trust-rules > header button{ flex:0 0 auto; }.risk-priority.p0{ background:#ffefed; color:#bd5b50; } @media (max-width:640px) { .quality-rule-summary{ grid-template-columns:1fr; }.quality-rule-head{ align-items:flex-start; flex-direction:column; gap:6px; }.quality-rule-domains > div{ display:grid; gap:3px; }.quality-rule-domains b{ flex:auto; }.quality-rule-domains span{ white-space:normal; } } /* 商场详情：品牌门店楼层维护 */ /* ========== 分类卡片 ========== */ .mall-brand-store-panel{ display:grid; gap:12px; margin-top:14px; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--panel); box-shadow:0 6px 18px rgba(34,79,145,.04); } .mall-brand-store-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:10px; border-bottom:1px solid var(--row-line); } .mall-brand-store-head > div:first-child{ min-width:0; }.mall-brand-store-head span{ color:var(--accent); font-size:9px; font-weight:700; letter-spacing:.08em; }.mall-brand-store-head h3{ margin:5px 0 4px; color:var(--text); font-size:14px; }.mall-brand-store-head p{ margin:0; color:var(--text-3); font-size:10px; line-height:1.5; } .mall-brand-store-count{ display:grid; flex:0 0 78px; gap:2px; padding:8px 10px; border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border)); border-radius:8px; background:var(--accent-soft); text-align:right; }.mall-brand-store-count b{ color:var(--accent); font-size:20px; line-height:1; }.mall-brand-store-count span{ color:var(--text-3); font-size:9px; } .mall-brand-store-summary{ display:flex; flex-wrap:wrap; gap:8px; color:var(--text-3); font-size:9px; }.mall-brand-store-summary span{ padding:4px 7px; border-radius:4px; background:var(--hover); } .mall-brand-floor-list{ display:grid; gap:9px; }.mall-brand-floor{ overflow:hidden; border:1px solid var(--border); border-radius:8px; }.mall-brand-floor > header{ display:flex; align-items:center; justify-content:space-between; padding:8px 11px; background:var(--accent-soft); }.mall-brand-floor > header b{ color:var(--accent); font-size:11px; }.mall-brand-floor > header span{ color:var(--text-3); font-size:9px; } .mall-brand-store-row{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(100px,1fr) auto; gap:12px; align-items:center; min-height:55px; padding:8px 11px; border-top:1px solid var(--row-line); }.mall-brand-store-row:first-child{ border-top:0; }.mall-brand-store-main, .mall-brand-store-meta{ display:grid; min-width:0; gap:3px; }.mall-brand-store-main b{ overflow:hidden; color:var(--accent); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.mall-brand-store-main strong{ overflow:hidden; color:var(--text-2); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.mall-brand-store-main small, .mall-brand-store-meta small{ overflow:hidden; color:var(--text-3); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.mall-brand-store-meta span{ overflow:hidden; color:var(--text-2); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.mall-brand-store-actions{ display:flex; gap:5px; }.mall-brand-store-actions .link{ padding:4px 6px; border:0; border-radius:4px; background:transparent; color:var(--accent); font:inherit; font-size:9px; cursor:pointer; }.mall-brand-store-actions .link:hover{ background:var(--accent-soft); }.mall-brand-store-actions .link.danger{ color:#b95751; } .mall-brand-empty{ padding:11px; color:var(--text-3); font-size:9px; }.mall-brand-empty.large{ padding:22px 12px; border:1px dashed var(--border); border-radius:8px; text-align:center; } .mall-brand-store-form-wrap{ display:grid; gap:9px; padding-top:2px; }.mall-brand-store-form{ padding:13px; border:1px solid var(--border); border-radius:8px; background:var(--hover); }.mall-brand-store-form[hidden]{ display:none; }.mall-brand-form-title{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }.mall-brand-form-title b{ color:var(--text-2); font-size:11px; }.mall-brand-form-title span{ color:var(--text-3); font-size:9px; }.mall-brand-form-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.mall-brand-form-grid label{ display:grid; gap:4px; color:var(--text-3); font-size:9px; }.mall-brand-form-grid label.wide{ grid-column:1 / -1; }.mall-brand-form-grid input, .mall-brand-form-grid select, .mall-brand-form-grid textarea{ box-sizing:border-box; width:100%; padding:7px 8px; border:1px solid var(--border); border-radius:8px; outline:0; background:var(--input-bg); color:var(--text); font:inherit; font-size:10px; }.mall-brand-form-grid input, .mall-brand-form-grid select{ height:31px; }.mall-brand-form-grid textarea{ resize:vertical; }.mall-brand-form-actions{ display:flex; justify-content:flex-end; gap:7px; margin-top:10px; } .mall-brand-view-tabs{ display:inline-flex; margin-left:auto; padding:2px; border:1px solid var(--border); border-radius:8px; background:var(--panel); }.mall-brand-view-tabs button{ padding:4px 8px; border:0; border-radius:4px; background:transparent; color:var(--text-3); font:inherit; font-size:9px; cursor:pointer; }.mall-brand-view-tabs button.active{ background:var(--accent-soft); color:var(--accent); font-weight:650; } .mall-brand-space{ display:grid; gap:10px; padding-top:2px; }.mall-brand-space-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }.mall-brand-space-toolbar > div:first-child{ display:grid; gap:3px; }.mall-brand-space-toolbar b{ color:var(--text-2); font-size:11px; }.mall-brand-space-toolbar span{ color:var(--text-3); font-size:9px; }.mall-brand-floor-switcher{ display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; }.mall-brand-floor-switcher button{ min-width:34px; padding:5px 7px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text-3); font:inherit; font-size:9px; cursor:pointer; }.mall-brand-floor-switcher button:hover, .mall-brand-floor-switcher button.active{ border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); background:var(--accent-soft); color:var(--accent); }.mall-brand-floor-plane:not(.active){ opacity:.48; }.mall-brand-floor-plane.active{ border-color:color-mix(in srgb,var(--accent) 62%,var(--border)); background:linear-gradient(135deg,color-mix(in srgb,var(--panel) 90%,var(--accent-soft)),color-mix(in srgb,var(--accent-soft) 52%,var(--panel))); }.mall-brand-floor-plane.active{ transform:translateX(-50%) translateY(calc(var(--floor-index) * -17px - 3px)) rotateX(57deg) rotateZ(-1deg); }.mall-brand-floor-plane-empty{ position:absolute; top:50%; left:50%; z-index:2; color:var(--text-3); font-size:9px; transform:translate(-50%,-50%) rotateX(-57deg) rotateZ(1deg); white-space:nowrap; }.mall-brand-space-marker{ position:absolute; top:var(--y); left:var(--x); z-index:3; display:flex; align-items:center; gap:4px; padding:3px 5px 3px 3px; border:1px solid color-mix(in srgb,var(--accent) 36%,var(--border)); border-radius:8px; background:var(--panel); color:var(--text-2); font:inherit; font-size:9px; cursor:pointer; transform:translate(-50%,-50%) rotateX(-57deg) rotateZ(1deg); box-shadow:0 3px 8px rgba(27,64,118,.14); transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; }.mall-brand-space-marker:hover{ z-index:5; border-color:var(--accent); box-shadow:0 7px 14px rgba(27,64,118,.2); transform:translate(-50%,-50%) rotateX(-57deg) rotateZ(1deg) scale(1.08); }.mall-brand-space-marker i{ display:block; width:7px; height:7px; border-radius:50%; background:#3aa37b; box-shadow:0 0 0 3px rgba(58,163,123,.14); }.mall-brand-space-marker.closed i{ background:#b96a62; box-shadow:0 0 0 3px rgba(185,106,98,.14); }.mall-brand-space-marker span{ max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.mall-brand-space-note{ display:flex; align-items:center; gap:7px; color:var(--text-3); font-size:9px; }.mall-brand-space-note span{ padding:3px 6px; border-radius:4px; background:var(--accent-soft); color:var(--accent); }.mall-brand-space-note b{ font-weight:500; } @media (max-width:720px) { .mall-brand-store-head{ flex-direction:column; }.mall-brand-store-count{ width:100%; box-sizing:border-box; text-align:left; }.mall-brand-store-row{ grid-template-columns:1fr auto; gap:8px; }.mall-brand-store-meta{ grid-column:1; }.mall-brand-store-actions{ grid-column:2; grid-row:1 / span 2; align-self:center; }.mall-brand-form-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:720px) { .mall-brand-store-summary{ align-items:flex-start; flex-direction:column; }.mall-brand-view-tabs{ margin-left:0; }.mall-brand-space-toolbar{ align-items:flex-start; flex-direction:column; }.mall-brand-floor-switcher{ justify-content:flex-start; }.mall-brand-space-note{ align-items:flex-start; flex-direction:column; gap:4px; } } @media (max-width:480px) { .mall-brand-form-grid{ grid-template-columns:1fr; }.mall-brand-form-grid label.wide{ grid-column:auto; }.mall-brand-space-marker span{ max-width:45px; } } /* 3D brand distribution viewer: observation only, with lightweight CSS perspective */ .mall-3d-view{ display:grid; gap:10px; padding-top:2px; } .mall-3d-toolbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--accent) 16%,var(--border)); border-radius:8px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 40%,var(--panel)),var(--panel)); } .mall-3d-toolbar > div:first-child{ display:grid; gap:3px; }.mall-3d-toolbar b{ color:var(--text-2); font-size:11px; }.mall-3d-toolbar span{ color:var(--text-3); font-size:9px; } .mall-3d-filters{ display:flex; align-items:flex-end; gap:7px; }.mall-3d-filters label{ display:grid; gap:3px; color:var(--text-3); font-size:9px; }.mall-3d-filters select{ min-width:88px; height:29px; padding:0 8px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text-2); font:inherit; font-size:9px; outline:0; } .mall-3d-layout{ display:grid; grid-template-columns:112px minmax(0,1fr) 210px; gap:10px; align-items:stretch; }.mall-3d-main{ display:grid; min-width:0; gap:8px; }.mall-3d-floor-nav, .mall-3d-detail{ padding:10px; border:1px solid color-mix(in srgb,var(--accent) 16%,var(--border)); border-radius:8px; background:var(--hover); }.mall-3d-floor-nav{ display:grid; align-content:start; gap:5px; }.mall-3d-floor-nav > div{ display:grid; gap:2px; margin-bottom:3px; }.mall-3d-floor-nav b{ color:var(--text-2); font-size:10px; }.mall-3d-floor-nav > div small{ color:var(--text-3); font-size:9px; }.mall-3d-floor-nav > button{ display:flex; align-items:center; justify-content:space-between; gap:4px; min-height:30px; padding:5px 6px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text-2); font:inherit; font-size:9px; cursor:pointer; text-align:left; }.mall-3d-floor-nav > button small{ color:var(--text-3); font-size:9px; }.mall-3d-floor-nav > button:hover, .mall-3d-floor-nav > button.active{ border-color:color-mix(in srgb,var(--accent) 36%,var(--border)); background:var(--accent-soft); color:var(--accent); }.mall-3d-detail{ display:grid; align-content:start; gap:7px; }.mall-3d-detail-head{ display:flex; align-items:center; justify-content:space-between; color:var(--text-3); font-size:9px; }.mall-3d-detail .link{ border:0; background:transparent; color:var(--accent); font:inherit; font-size:9px; cursor:pointer; }.mall-3d-detail h4{ margin:2px 0 0; color:var(--accent); font-size:13px; }.mall-3d-detail-store{ color:var(--text-2); font-size:10px; }.mall-3d-detail dl{ display:grid; grid-template-columns:68px minmax(0,1fr); gap:6px 5px; margin:3px 0 4px; }.mall-3d-detail dt{ color:var(--text-3); font-size:9px; }.mall-3d-detail dd{ overflow:hidden; margin:0; color:var(--text-2); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.mall-3d-detail .btn{ width:100%; }.mall-3d-detail-empty{ display:grid; align-content:center; justify-items:start; gap:7px; height:100%; min-height:150px; color:var(--text-3); }.mall-3d-detail-empty b{ color:var(--text-2); font-size:11px; }.mall-3d-detail-empty span{ font-size:9px; line-height:1.5; } .mall-3d-viewport{ position:relative; min-height:390px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); border-radius:12px; background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--accent-soft) 46%,var(--panel)),var(--panel) 66%); perspective:900px; cursor:grab; touch-action:none; } .mall-3d-viewport.dragging{ cursor:grabbing; } .mall-3d-viewport::before{ position:absolute; inset:16px; border:1px dashed color-mix(in srgb,var(--accent) 18%,transparent); border-radius:8px; content:""; pointer-events:none; } .mall-3d-scene{ position:absolute; top:50%; left:50%; width:min(74%,580px); height:260px; transform:translate(-50%,-47%) scale(var(--zoom)) rotateX(var(--rot-x)) rotateY(var(--rot-y)); transform-style:preserve-3d; transition:transform .18s ease; } .mall-3d-viewport.dragging .mall-3d-scene{ transition:none; } .mall-3d-floor{ position:absolute; top:50%; left:50%; width:100%; height:205px; transform:translate(-50%,-50%) translateZ(var(--floor-z)) rotateX(60deg); transform-style:preserve-3d; border:1px solid color-mix(in srgb,var(--accent) 42%,var(--border)); border-radius:12px; background:linear-gradient(135deg,color-mix(in srgb,var(--panel) 93%,var(--accent-soft)),color-mix(in srgb,var(--accent-soft) 58%,var(--panel))); box-shadow:0 14px 20px rgba(28,65,118,.13); } .mall-3d-floor.dimmed{ opacity:.16; }.mall-3d-floor.active{ opacity:.9; } .mall-3d-floor::after{ position:absolute; inset:10px; border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border)); border-radius:8px; background:linear-gradient(90deg,transparent 49.5%,color-mix(in srgb,var(--accent) 12%,transparent) 50%,transparent 50.5%),linear-gradient(0deg,transparent 49.5%,color-mix(in srgb,var(--accent) 12%,transparent) 50%,transparent 50.5%); background-size:25% 25%; content:""; } .mall-3d-floor span{ position:absolute; top:-26px; left:4px; z-index:2; color:var(--accent); font-size:10px; font-weight:700; transform:rotateX(-60deg); transform-origin:left bottom; white-space:nowrap; } .mall-3d-marker{ position:absolute; top:var(--y); left:var(--x); z-index:5; display:flex; align-items:center; gap:4px; padding:3px 6px 3px 3px; transform:translate(-50%,-50%) translateZ(calc(var(--z) + 24px)); transform-style:preserve-3d; border:1px solid color-mix(in srgb,var(--accent) 64%,var(--border)); border-radius:8px; background:var(--panel); color:var(--text-2); box-shadow:0 4px 12px rgba(24,62,113,.22); font:inherit; font-size:9px; cursor:pointer; white-space:nowrap; } .mall-3d-marker::before{ position:absolute; bottom:100%; left:50%; width:1px; height:18px; background:color-mix(in srgb,var(--accent) 62%,transparent); content:""; transform:translateX(-50%); } .mall-3d-marker:hover, .mall-3d-marker.selected{ z-index:12; border-color:var(--accent); box-shadow:0 7px 18px rgba(24,62,113,.3); transform:translate(-50%,-50%) translateZ(calc(var(--z) + 34px)) scale(1.08); }.mall-3d-marker.selected{ outline:2px solid color-mix(in srgb,var(--accent) 32%,transparent); }.mall-3d-marker i{ display:block; width:8px; height:8px; border-radius:50%; background:#2e9c74; box-shadow:0 0 0 4px rgba(46,156,116,.2); }.mall-3d-marker.closed i{ background:#b65b56; box-shadow:0 0 0 4px rgba(182,91,86,.2); }.mall-3d-marker span{ display:grid; gap:1px; max-width:82px; overflow:hidden; text-overflow:ellipsis; }.mall-3d-marker em{ overflow:hidden; color:var(--accent); font-size:9px; font-style:normal; text-overflow:ellipsis; } .mall-3d-axis{ position:absolute; right:9%; bottom:2%; display:flex; gap:6px; transform:rotateX(-60deg); transform-origin:right bottom; color:var(--text-3); font-size:9px; opacity:.7; }.mall-3d-hint{ position:absolute; left:50%; bottom:12px; padding:5px 9px; border:1px solid color-mix(in srgb,var(--accent) 16%,var(--border)); border-radius:999px; background:color-mix(in srgb,var(--panel) 90%,transparent); color:var(--text-3); font-size:9px; transform:translateX(-50%); white-space:nowrap; pointer-events:none; } .mall-3d-footer{ display:flex; justify-content:space-between; gap:10px; color:var(--text-3); font-size:9px; }.mall-3d-legend{ display:flex; align-items:center; gap:5px; }.mall-3d-legend i{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#3aa37b; }.mall-3d-legend i.closed{ margin-left:5px; background:#b96a62; } @media (max-width:900px) { .mall-3d-layout{ grid-template-columns:92px minmax(0,1fr); }.mall-3d-detail{ grid-column:1 / -1; min-height:0; }.mall-3d-detail-empty{ min-height:70px; } } @media (max-width:720px) { .mall-3d-toolbar{ align-items:flex-start; flex-direction:column; }.mall-3d-filters{ align-items:center; flex-wrap:wrap; }.mall-3d-layout{ grid-template-columns:1fr; }.mall-3d-floor-nav{ display:flex; overflow-x:auto; align-items:center; }.mall-3d-floor-nav > div{ flex:0 0 auto; margin-right:3px; }.mall-3d-floor-nav > button{ flex:0 0 auto; min-width:74px; }.mall-3d-viewport{ min-height:320px; }.mall-3d-scene{ width:88%; }.mall-3d-hint{ bottom:8px; font-size:9px; } } /* Indoor-map style floor volumes and configured tenant blocks */ .mall-3d-floor{ overflow:visible; border-width:2px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 68%,var(--panel)),color-mix(in srgb,var(--panel) 88%,var(--accent-soft))); } .mall-3d-floor::before{ position:absolute; right:-14px; bottom:-14px; width:100%; height:14px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-top:0; background:color-mix(in srgb,var(--accent-soft) 72%,var(--panel)); content:""; transform:skewY(-33deg); transform-origin:left top; } .mall-3d-floor::after{ position:absolute; right:-14px; top:0; width:14px; height:100%; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border)); border-left:0; background:color-mix(in srgb,var(--accent-soft) 62%,var(--panel)); content:""; transform:skewY(33deg); transform-origin:left top; } .mall-3d-floor-grid{ position:absolute; inset:10px; border:1px solid color-mix(in srgb,var(--accent) 17%,var(--border)); border-radius:8px; background:linear-gradient(90deg,transparent 49.5%,color-mix(in srgb,var(--accent) 12%,transparent) 50%,transparent 50.5%),linear-gradient(0deg,transparent 49.5%,color-mix(in srgb,var(--accent) 12%,transparent) 50%,transparent 50.5%); background-size:25% 25%; pointer-events:none; } .mall-3d-floor-label{ position:absolute; top:-30px; left:4px; z-index:6; color:var(--accent); font-size:11px; font-weight:750; letter-spacing:.02em; transform:rotateX(-60deg); transform-origin:left bottom; white-space:nowrap; } .mall-3d-building-block{ position:absolute; top:var(--y); left:var(--x); z-index:3; width:var(--w); height:var(--h); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-radius:4px; background:color-mix(in srgb,var(--accent-soft) 76%,var(--panel)); box-shadow:0 5px 9px rgba(28,65,118,.11); transform:translateZ(8px); } .mall-3d-building-block::after{ position:absolute; right:-5px; bottom:-5px; width:100%; height:5px; background:color-mix(in srgb,var(--accent-soft) 62%,var(--panel)); content:""; transform:skewY(-35deg); transform-origin:left top; }.mall-3d-building-block.ellipse{ border-radius:50%; }.mall-3d-building-block.atrium{ background:color-mix(in srgb,#f1c765 35%,var(--panel)); border-color:color-mix(in srgb,#d5a529 50%,var(--border)); }.mall-3d-building-block.corridor{ background:color-mix(in srgb,#78bde8 38%,var(--panel)); border-color:color-mix(in srgb,#4c9ed6 48%,var(--border)); }.mall-3d-building-block b{ position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; color:var(--text-3); font-size:9px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; } .mall-3d-axis{ padding:6px 8px; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); border-radius:8px; background:color-mix(in srgb,var(--panel) 82%,transparent); } .mall-3d-floor{ transform:translate(-50%,-50%) translateZ(var(--floor-z)); } .mall-3d-floor-label{ transform:translateZ(14px) rotateX(calc(var(--rot-x) * -1)); } .mall-3d-floor{ border-color:color-mix(in srgb,var(--floor-color) 62%,var(--border)); background:linear-gradient(135deg,color-mix(in srgb,var(--floor-color) 38%,var(--panel)),color-mix(in srgb,var(--floor-color) 17%,var(--panel))); } .mall-3d-floor::before{ background:color-mix(in srgb,var(--floor-color) 28%,var(--panel)); border-color:color-mix(in srgb,var(--floor-color) 52%,var(--border)); }.mall-3d-floor::after{ background:color-mix(in srgb,var(--floor-color) 22%,var(--panel)); border-color:color-mix(in srgb,var(--floor-color) 48%,var(--border)); }.mall-3d-floor-grid{ border-color:color-mix(in srgb,var(--floor-color) 34%,var(--border)); background:linear-gradient(90deg,transparent 49.5%,color-mix(in srgb,var(--floor-color) 25%,transparent) 50%,transparent 50.5%),linear-gradient(0deg,transparent 49.5%,color-mix(in srgb,var(--floor-color) 25%,transparent) 50%,transparent 50.5%); background-size:25% 25%; } .mall-3d-ground{ position:absolute; top:69%; left:50%; width:82%; height:170px; border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border)); border-radius:8px; background-color:color-mix(in srgb,var(--accent-soft) 20%,var(--panel)); background-image:linear-gradient(90deg,color-mix(in srgb,var(--accent) 13%,transparent) 1px,transparent 1px),linear-gradient(0deg,color-mix(in srgb,var(--accent) 13%,transparent) 1px,transparent 1px); background-size:24px 24px; box-shadow:0 17px 28px rgba(28,65,118,.12); transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-2deg); transform-origin:center center; } .mall-3d-building-title{ position:absolute; top:14px; left:18px; z-index:15; padding:5px 8px; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); border-radius:8px; background:color-mix(in srgb,var(--panel) 88%,transparent); color:var(--text-2); font-size:9px; font-weight:650; } /* 楼层空间编辑：单层清晰选点，立体层级仅作为辅助提示 */ .mall-brand-space-stage{ display:grid; grid-template-columns:108px minmax(0,1fr); gap:12px; min-height:390px; padding:12px; border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border)); border-radius:12px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent-soft) 27%,var(--panel)),var(--panel) 62%); } .mall-brand-floor-rail{ display:grid; align-content:start; gap:5px; padding:4px; border-right:1px solid var(--row-line); }.mall-brand-floor-rail > b{ padding:4px 7px 7px; color:var(--text-3); font-size:9px; font-weight:600; }.mall-brand-floor-rail button{ display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:39px; padding:6px 7px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text-2); font:inherit; text-align:left; cursor:pointer; }.mall-brand-floor-rail button:hover, .mall-brand-floor-rail button.active{ border-color:color-mix(in srgb,var(--accent) 35%,var(--border)); background:var(--accent-soft); color:var(--accent); }.mall-brand-floor-rail button span{ font-size:10px; font-weight:650; }.mall-brand-floor-rail button small{ color:var(--text-3); font-size:9px; } .mall-brand-floor-plan{ position:relative; min-height:360px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border)); border-radius:12px; background:linear-gradient(145deg,#fbfdff,#f1f6fd); cursor:crosshair; }.mall-brand-floor-plan::after{ position:absolute; inset:14px; border:1px dashed color-mix(in srgb,var(--accent) 18%,transparent); border-radius:8px; content:""; pointer-events:none; }.mall-brand-floor-plan-grid{ position:absolute; inset:14px; background-image:linear-gradient(to right,color-mix(in srgb,var(--accent) 8%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--accent) 8%,transparent) 1px,transparent 1px); background-size:10% 10%; pointer-events:none; }.mall-brand-floor-plan-label{ position:absolute; top:20px; left:24px; z-index:2; color:var(--accent); font-size:12px; letter-spacing:.02em; }.mall-brand-floor-plan-empty{ position:absolute; top:50%; left:50%; z-index:2; padding:8px 11px; border:1px dashed var(--border); border-radius:8px; background:rgba(255,255,255,.82); color:var(--text-3); font-size:10px; transform:translate(-50%,-50%); pointer-events:none; white-space:nowrap; } .mall-brand-space-marker{ transform:translate(-50%,-50%); }.mall-brand-space-marker:hover{ transform:translate(-50%,-50%) scale(1.08); }.mall-brand-point-picked{ display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:7px 9px; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); border-radius:8px; background:var(--accent-soft); }.mall-brand-point-picked span{ color:var(--text-3); font-size:9px; }.mall-brand-point-picked b{ color:var(--accent); font-size:10px; }.mall-brand-point-picked small{ margin-left:auto; color:var(--text-3); font-size:9px; } .mall-brand-draft-marker{ position:absolute; top:var(--y); left:var(--x); z-index:6; display:grid; justify-items:center; gap:4px; transform:translate(-50%,-50%); pointer-events:none; }.mall-brand-draft-marker i{ width:13px; height:13px; border:3px solid #fff; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent),0 6px 14px rgba(32,94,204,.22); }.mall-brand-draft-marker b{ padding:3px 6px; border-radius:4px; background:var(--accent); color:#fff; font-size:9px; white-space:nowrap; box-shadow:0 3px 8px rgba(32,94,204,.18); } @media (max-width:720px) { .mall-brand-space-stage{ grid-template-columns:1fr; }.mall-brand-floor-rail{ display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--row-line); padding-bottom:7px; }.mall-brand-floor-rail > b{ display:none; }.mall-brand-floor-rail button{ flex:0 0 auto; min-width:60px; }.mall-brand-floor-plan{ min-height:290px; }.mall-brand-point-picked{ align-items:flex-start; flex-wrap:wrap; }.mall-brand-point-picked small{ flex-basis:100%; margin-left:0; } } /* 可配置商场空间：区域/楼栋、楼层、图层区块均以商场自身配置为准。 */ .mall-space-area-tabs{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 8px; }.mall-space-area-tabs button{ display:flex; align-items:baseline; gap:5px; padding:6px 9px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text-2); font:inherit; font-size:10px; cursor:pointer; }.mall-space-area-tabs button small{ color:var(--text-3); font-size:9px; }.mall-space-area-tabs button:hover, .mall-space-area-tabs button.active{ border-color:color-mix(in srgb,var(--accent) 48%,var(--border)); background:var(--accent-soft); color:var(--accent); } .mall-space-config{ display:grid; gap:9px; padding:12px; border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border)); border-radius:12px; background:color-mix(in srgb,var(--accent-soft) 36%,var(--panel)); }.mall-space-config header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.mall-space-config header > div:first-child{ min-width:0; }.mall-space-config header span{ color:var(--accent); font-size:9px; font-weight:700; letter-spacing:.08em; }.mall-space-config h4{ margin:4px 0 3px; color:var(--text); font-size:12px; }.mall-space-config p{ margin:0; color:var(--text-3); font-size:9px; }.mall-space-config header > div:last-child{ display:flex; gap:6px; }.mall-space-config-toolbar{ display:flex; flex-wrap:wrap; align-items:end; gap:6px; padding:8px 0; border-top:1px solid color-mix(in srgb,var(--accent) 12%,var(--border)); }.mall-space-config-toolbar.secondary{ align-items:center; padding-bottom:0; }.mall-space-config-toolbar.tertiary{ padding-top:0; }.mall-space-config-toolbar label{ display:grid; gap:3px; color:var(--text-3); font-size:9px; }.mall-space-config-toolbar.tertiary label{ min-width:190px; }.mall-space-config-toolbar select, .mall-space-config-toolbar input{ min-width:104px; height:30px; box-sizing:border-box; padding:0 7px; border:1px solid var(--border); border-radius:8px; outline:0; background:var(--input-bg); color:var(--text-2); font:inherit; font-size:9px; }.mall-space-config-toolbar .danger{ color:#ad5d58; }.mall-space-config-toolbar small{ color:var(--text-3); font-size:9px; } .mall-brand-floor-plan.has-background{ background-color:#f8fbff; background-position:center; background-repeat:no-repeat; background-size:contain; }.mall-brand-floor-plan.has-background .mall-brand-floor-plan-grid{ opacity:.24; }.mall-space-block{ position:absolute; top:var(--y); left:var(--x); z-index:2; display:grid; width:var(--w); height:var(--h); place-items:center; padding:0; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-radius:8px; background:rgba(255,255,255,.78); color:var(--accent); font:inherit; font-size:9px; transform:translate(0,0); pointer-events:none; }.mall-space-block.atrium{ border-color:rgba(218,162,46,.48); background:rgba(255,247,221,.84); color:#a77724; }.mall-space-block.corridor{ border-style:dashed; background:rgba(242,247,253,.87); color:var(--text-3); }.mall-space-block.ellipse{ border-radius:50%; }.mall-space-block.editable{ z-index:8; cursor:move; pointer-events:auto; }.mall-space-block.editable:hover{ border-color:var(--accent); box-shadow:0 4px 11px rgba(32,94,204,.12); }.mall-space-block > span{ max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }.mall-space-block-resize{ position:absolute; right:-7px; bottom:-7px; display:grid; width:14px; height:14px; place-items:center; border:1px solid var(--accent); border-radius:4px; background:var(--panel); color:var(--accent); font-size:10px; font-style:normal; line-height:1; cursor:nwse-resize; } @media (max-width:720px) { .mall-space-config header{ flex-direction:column; }.mall-space-config-toolbar{ align-items:center; }.mall-space-config-toolbar label{ width:calc(50% - 4px); }.mall-space-config-toolbar select{ width:100%; }.mall-space-config header > div:last-child{ width:100%; }.mall-space-config header > div:last-child button{ flex:1; } } /* 分类维护卡片：让层级信息更容易扫读，也避免在宽屏里被表格横向拉开。 */ /* ========== 品牌数据 ========== */ .category-card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; padding:16px; } .category-card{ display:flex; min-height:142px; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--panel); box-shadow:0 4px 14px rgba(35,68,116,.045); transition:transform .2s cubic-bezier(.2,.8,.25,1),box-shadow .2s ease,border-color .2s ease; } .category-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 24%,var(--border)); box-shadow:0 10px 24px rgba(35,68,116,.10); } .category-card-main{ display:flex; min-width:0; flex:1; align-items:center; gap:11px; padding:17px 16px 10px; border:0; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; } .category-card-main:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; border-radius:16px; } .category-card-icon{ display:grid; width:34px; height:34px; flex:none; place-items:center; border-radius:12px; background:var(--accent-soft); color:var(--accent); } .category-card-icon svg{ width:19px; height:19px; } .category-card-copy{ display:grid; min-width:0; gap:5px; } .category-card-copy b{ overflow:hidden; color:var(--text); font-size:14px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; } .category-card-copy small{ color:var(--text-3); font-size:10px; } .category-card-arrow{ margin-left:auto; color:var(--text-3); font-size:22px; line-height:1; transition:color .16s ease,transform .16s ease; } .category-card:hover .category-card-arrow{ color:var(--accent); transform:translateX(2px); } .category-card-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 16px 13px; color:var(--text-3); font-size:10px; } .category-card-meta b{ color:var(--text-2); font-size:14px; font-variant-numeric:tabular-nums; } .category-card-meta .tag{ padding:3px 7px; border-radius:999px; font-size:9px; } .category-card-actions{ display:flex; justify-content:flex-end; gap:12px; padding:9px 14px; border-top:1px solid var(--row-line); background:color-mix(in srgb,var(--hover) 55%,transparent); } .category-card-actions .link{ padding:2px 0; } @media (max-width:720px) { .category-card-grid{ grid-template-columns:1fr; padding:12px; } } /* 收尾优化：让内容区、工具栏和数据表拥有更稳定的视觉节奏。 */ [data-theme="f"] .content{ background: transparent; } [data-theme="f"] .panel-head, [data-theme="f"] .toolbar, [data-theme="f"] .all-toolbar, [data-theme="f"] .data-manager-head{ border-bottom-color: rgba(199,214,231,.62); } [data-theme="f"] .panel-head{ min-height: 54px; background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.12)); } [data-theme="f"] .toolbar-title{ letter-spacing: -.015em; } [data-theme="f"] table thead th{ background: rgba(241,246,252,.7); color: #64798e; font-weight: 650; letter-spacing: .01em; } [data-theme="f"] table tbody tr{ transition: background-color .16s ease; } [data-theme="f"] table tbody tr:hover{ background: rgba(231,241,252,.42); } [data-theme="f"] .settings-table, [data-theme="f"] .role-sidebar, [data-theme="f"] .role-editor{ border-color: rgba(190,210,232,.7); box-shadow: 0 8px 22px rgba(68,105,145,.045), inset 0 1px 0 rgba(255,255,255,.8); } [data-theme="f"] .panel-empty{ min-height: 180px; display: grid; place-items: center; color: #8295a9; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(245,249,253,.38)); } [data-theme="f"] input, [data-theme="f"] select, [data-theme="f"] textarea{ transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } [data-theme="f"] ::selection{ background: rgba(22,112,248,.2); color: #173b68; } [data-theme="f"] ::-webkit-scrollbar{ width: 8px; height: 8px; } [data-theme="f"] ::-webkit-scrollbar-track{ background: transparent; } [data-theme="f"] ::-webkit-scrollbar-thumb{ border: 2px solid transparent; border-radius: 999px; background: #cbd9e8; background-clip: padding-box; } [data-theme="f"] ::-webkit-scrollbar-thumb:hover{ background: #aebfd3; background-clip: padding-box; } @media (max-width:720px) { [data-theme="f"] .panel-head{ min-height: 48px; } } /* 导航选中态唯一规则：浅蓝背景、蓝色文字、图标白底描边。 其他主题文件不得覆盖这组状态。 */ [data-theme="f"] :is(.tree-row,.section-nav-row,.domain-nav-row,.dashboard-nav-row,.operation-log-nav-row,.nav-item).selected{ position:relative; background:rgba(22,112,248,.09) !important; color:#1558b8 !important; border-radius:12px; box-shadow:none !important; transform:none; } [data-theme="f"] :is(.tree-row,.section-nav-row,.domain-nav-row,.dashboard-nav-row,.operation-log-nav-row,.nav-item).selected::before{ content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:0 4px 4px 0; background:#1670f8; } [data-theme="f"] :is(.tree-row,.section-nav-row,.domain-nav-row,.dashboard-nav-row,.operation-log-nav-row,.nav-item).selected :is(.node-name,.node-count,.caret,.nav-item-name,.nav-item-count){ color:#1558b8 !important; } [data-theme="f"] :is(.tree-row,.section-nav-row,.domain-nav-row,.dashboard-nav-row,.operation-log-nav-row,.nav-item).selected :is(.node-count,.nav-item-count){ background:transparent !important; } [data-theme="f"] .sidebar :is(.tree-row,.section-nav-row,.domain-nav-row,.dashboard-nav-row,.operation-log-nav-row,.nav-item).selected :is(.node-icon,.nav-item-icon){ display:inline-flex; align-items:center; justify-content:center; min-width:25px; min-height:25px; box-sizing:border-box; border:1px solid rgba(0,102,255,.24) !important; border-radius:8px; background:#fff !important; color:#1265dc !important; box-shadow:0 1px 3px rgba(39,92,155,.12) !important; } [data-theme="f"] .sidebar :is(.tree-row,.section-nav-row,.domain-nav-row,.dashboard-nav-row,.operation-log-nav-row,.nav-item).selected :is(.node-icon,.nav-item-icon) svg, [data-theme="f"] .sidebar :is(.tree-row,.section-nav-row,.domain-nav-row,.dashboard-nav-row,.operation-log-nav-row,.nav-item).selected :is(.node-icon,.nav-item-icon) .domain-glyph{ fill:none !important; stroke:#1265dc !important; color:#1265dc !important; } /* 门店身份信息：标签与值分开，编号只在基础标识展示。 */ /* 门店列表字段与操作 */ .brand-store-table .brand-store-name-link{ display:block; width:0; min-width:100%; } .brand-store-address{display:block;color:var(--text-2)} /* 字段提示使用独立实色表面，避免玻璃主题的半透明面板透出表格内容。 */ .store-field-tooltip{ position:fixed; z-index:10000; box-sizing:border-box; width:max-content; max-width:min(420px,calc(100vw - 16px)); max-height:calc(100vh - 16px); overflow:auto; padding:10px 12px; border:1px solid #cbd8e8; border-radius:8px; background:#fff; color:#1f2f46; box-shadow:0 10px 28px rgba(31,59,98,.18); backdrop-filter:none; -webkit-backdrop-filter:none; font-size:12px; line-height:1.6; user-select:text; } .store-field-tooltip[hidden]{ display:none; } .store-field-tooltip strong{ display:block; margin-bottom:3px; color:#61738c; font-size:11px; font-weight:500; } .store-field-tooltip span{ display:block; white-space:pre-wrap; overflow-wrap:anywhere; } /* ========== 门店数据 ========== */ .brand-store-table td:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; } /* 门店列表按内容分配列宽，长文本让位于完整地域标签和操作。 */ .brand-store-table table{ min-width:0; table-layout:auto; font-size:var(--field-size);} .brand-store-table th{ line-height:1.5; font-size:var(--field-label-size);} .brand-store-table th:nth-child(1), .brand-store-table td:nth-child(1){ width:8%; } .brand-store-table td:first-child b{ width:0; min-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .brand-store-table th:nth-child(2), .brand-store-table td:nth-child(2){ width:9%; } .brand-store-table th:nth-child(3), .brand-store-table td:nth-child(3){ width:14%; } .brand-store-table th:nth-child(4), .brand-store-table td:nth-child(4){ width:1%; white-space:nowrap; } .brand-store-table th:nth-child(5), .brand-store-table td:nth-child(5){ width:18%; } .brand-store-table th:nth-child(6), .brand-store-table td:nth-child(6){ width:132px; min-width:132px; text-align:center; } .brand-store-table th:nth-child(7), .brand-store-table td:nth-child(7){ width:78px; min-width:60px; text-align:center; } .brand-store-table th:nth-child(8), .brand-store-table td:nth-child(8){ width:82px; min-width:64px; text-align:center; } .brand-store-table th:nth-child(9), .brand-store-table td:nth-child(9){ width:144px; text-align:center; } .brand-store-table td code{ display:block; width:0; min-width:100%; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; line-height:1.45; } .brand-store-table .brand-store-address{ width:0; min-width:100%; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--field-size); } .brand-store-region-tags{ display:flex; flex-wrap:nowrap; gap:4px; align-items:center; min-width:0; } .brand-store-region-tags span{ box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; height:24px; padding:2px 7px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text-2); font-size:var(--field-label-size); line-height:1.2; white-space:nowrap; } .brand-store-region-tags span{ display:block; flex:0 0 auto; min-width:max-content; line-height:18px; overflow:visible; text-overflow:clip; } .store-coordinate-quality{ --quality-tone:#b77718; box-sizing:border-box; display:inline-flex; flex:none; align-items:center; justify-content:center; height:24px; padding:2px 7px; border:1px solid color-mix(in srgb,var(--quality-tone) 32%,var(--border)); border-radius:8px; background:color-mix(in srgb,var(--quality-tone) 11%,var(--panel)); color:color-mix(in srgb,var(--quality-tone) 82%,var(--text)); font-size:var(--field-label-size); font-weight:550; line-height:1.2; white-space:nowrap; } .store-coordinate-quality[data-status="已核验"]{ --quality-tone:#2d8a70; } .brand-store-region-tags .region-province{ border-color:color-mix(in srgb,#438aee 35%,var(--border)); background:color-mix(in srgb,#438aee 10%,var(--panel)); color:color-mix(in srgb,#438aee 75%,var(--text)); } .brand-store-region-tags .region-city{ border-color:color-mix(in srgb,#8a65ce 35%,var(--border)); background:color-mix(in srgb,#8a65ce 10%,var(--panel)); color:color-mix(in srgb,#8a65ce 75%,var(--text)); } .brand-store-region-tags .region-district{ border-color:color-mix(in srgb,#299b96 35%,var(--border)); background:color-mix(in srgb,#299b96 10%,var(--panel)); color:color-mix(in srgb,#299b96 75%,var(--text)); } .brand-store-region-tags span.is-empty{ border-style: dashed; background: transparent; color: var(--text-3); } @media (max-width: 900px) { .brand-store-table td{ padding-inline: 10px; } } .brand-store-status.open{ border-color:#9ed9c0; background:#eaf7f1; color:#368467; } .brand-store-status.closed{ background:#f3f4f6; color:#737b86; } .store-row-actions{ white-space:nowrap; text-align:center; } .store-record-actions{ display:flex; flex:none; flex-wrap:wrap; gap:8px; } .store-record-view, .store-editor{ display:flex; flex-direction:column; height:100%; min-height:0; padding:0; overflow:hidden; } .store-record-scroll, .store-editor-scroll{ flex:1 1 auto; min-width:0; min-height:0; padding:16px 18px 12px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; } /* Page-level record actions share the title row, outside each scrolling panel. */ #recordPageActions:empty{ display:none; } #recordPageActions{ margin-left:auto; min-width:0; flex:0 1 auto; } .toolbar:has(#recordPageActions:not(:empty)){ flex:none; } .toolbar:has(#recordPageActions:not(:empty)) .toolbar-title{ min-width:0; overflow-wrap:anywhere; } .toolbar:has(#recordPageActions:not(:empty)) > .toolbar-actions{ display:none; } .store-page-actions{ display:flex; align-items:center; justify-content:flex-end; gap:14px; } .store-page-actions #storeEditorError{ max-width:360px; min-width:0; margin:0; color:var(--danger); font-size:11px; line-height:1.45; } .store-page-actions #storeEditorError:empty{ display:none; } #recordPageActions .record-page-actions{ flex-wrap:wrap; justify-content:flex-end; } .store-editor-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:10px 12px; } .store-basic-fields{ grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr) minmax(0,.9fr) minmax(0,1.6fr); } .store-editor-grid.store-basic-fields{ gap:0; padding:0; } .store-editor-grid.store-basic-fields > .store-editor-field{ padding:9px 12px; } .store-editor-field{ display:grid; align-content:start; gap:5px; min-width:0; color:var(--store-label-color); font-size:var(--field-label-size); font-weight:400; line-height:1.5; } .store-editor-field.wide{ grid-column:1/-1; } .store-editor-field input, .store-editor-field select, .store-editor-field textarea{ box-sizing:border-box; width:100%; min-height:34px; padding:6px 9px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--store-value-color); font:inherit; font-size:13px; font-weight:400; line-height:1.5; } .store-editor-field textarea{ resize:vertical; } .brand-store-detail .store-numeric{ font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; font-weight:400; letter-spacing:0; } /* 身份字段使用公共只读表面表达锁定状态。 */ .store-editor-field small{ color:var(--store-label-color); font-size:var(--field-label-size); font-weight:400; line-height:1.5; } /* 必填标记由公共组件管理；这里只定义提交后的错误提示。 */ #storeEditorForm .store-editor-field.has-error > :is(input,select){ border-color:var(--danger) !important; box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 12%,transparent) !important; } #storeEditorForm .store-editor-field.has-error > :is(input,select):focus-visible{ outline-color:var(--danger) !important; } .store-editor-field small.store-field-error{ color:var(--danger); font-weight:500; } .store-field-error[hidden]{ display:none; } .store-region-validation{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; color:var(--danger); font-size:12px; } .store-region-validation[hidden]{ display:none; } .store-region-inputs.has-region-conflict select{ border-color:var(--danger); } /* Store confidence is a coordinate evidence level, separate from edit history. */ .store-confidence-tag{ display:inline-flex; align-items:center; min-height:24px; box-sizing:border-box; padding:2px 10px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-radius:8px; background:color-mix(in srgb,var(--accent) 9%,var(--panel)); color:var(--accent); font-size:var(--field-label-size); font-weight:600; line-height:1.4; white-space:nowrap; } .store-confidence-tag[data-confidence="高"]{ border-color:rgba(37,145,103,.28); background:rgba(226,247,237,.86); color:#23774f; } .store-confidence-tag[data-confidence="较高"]{ border-color:rgba(47,117,206,.28); background:rgba(228,240,255,.9); color:#2c66a5; } .store-confidence-tag[data-confidence="中"]{ border-color:rgba(190,139,47,.3); background:rgba(255,246,222,.9); color:#8a681d; } .store-resolution-control{ display:grid; gap:8px; min-width:0; color:var(--store-label-color); font-size:var(--field-label-size); } .store-resolution-control > label{ font-weight:500; } .store-resolution-control select{ width:100%; min-width:0; box-sizing:border-box; min-height:38px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--store-value-color); font:inherit; } .store-resolution-preview{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .store-resolution-preview small{ color:var(--text-3); font-size:12px; } .store-resolution-preview output{ display:inline-flex; } .coordinate-confirmation{ display:grid; gap:12px; margin-top:16px; padding:14px; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--geo-line,var(--border))); border-radius:12px; background:color-mix(in srgb,var(--geo-surface,var(--panel)) 88%,var(--accent-soft)); } .coordinate-confirmation > [data-confirm-coordinate]{ justify-self:start; min-height:38px; } .coordinate-resolution-stage{ display:grid; gap:12px; } .coordinate-resolution-stage .geo-note{ margin-top:0; } .coordinate-resolution-stage[hidden], [data-confirm-coordinate][hidden]{ display:none !important; } .store-editor-choices{ display:flex; flex-wrap:wrap; gap:8px; min-height:34px; align-items:center; } .store-attribute-option{ position:relative; display:inline-flex; cursor:pointer; } /* 保留原生多选和键盘操作，标签承担全部可见样式。 */ .store-attribute-option input{ position:absolute; inset:0; z-index:1; width:100%; height:100%; min-height:0; margin:0; padding:0; border:0; opacity:0; cursor:inherit; } .store-attribute-tag{ display:inline-flex; justify-content:center; align-items:center; gap:6px; min-height:30px; box-sizing:border-box; padding:4px 10px; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--site-line,var(--border))); border-radius:8px; background:linear-gradient(160deg,color-mix(in srgb,var(--panel) 82%,transparent),color-mix(in srgb,var(--accent-soft) 70%,var(--panel))); color:var(--accent-strong,#245f9d); font-size:var(--field-label-size); font-weight:500; line-height:1.35; white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 3px rgba(35,70,110,.05); } .store-attribute-tag svg{ width:13px; height:13px; flex:none; } .store-attribute-check{ visibility:hidden; } .store-attribute-add{ opacity:.7; } .store-attribute-option:hover input:not(:checked) + .store-attribute-tag{ border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 5px color-mix(in srgb,var(--accent) 12%,transparent); } .store-attribute-option input:checked + .store-attribute-tag{ border-color:var(--accent-strong,#0969da); background:var(--accent-strong,#0969da); color:#fff; box-shadow:0 2px 5px color-mix(in srgb,var(--accent) 18%,transparent); } .store-attribute-option input:checked + .store-attribute-tag .store-attribute-check{ visibility:visible; } .store-attribute-option input:checked + .store-attribute-tag .store-attribute-add{ visibility:hidden; } .store-attribute-option input:focus-visible + .store-attribute-tag{ outline:2px solid var(--accent); outline-offset:3px; } @media(max-width:1100px){.store-basic-fields{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}} @media(max-width:640px){.store-editor-grid, .store-basic-fields{grid-template-columns:1fr}} @media(max-width:640px){ .store-record-scroll, .store-editor-scroll{padding:12px 12px 10px} .toolbar:has(#recordPageActions:not(:empty)){flex-wrap:wrap} #recordPageActions{max-width:100%} .store-page-actions{flex-direction:column;align-items:flex-end;gap:6px} .store-page-actions .store-record-actions{gap:6px} } /* Shared field typography; semantic and read-only colours retain their owners. */ .content, .modal, .unified-select-menu{ font-family:var(--field-font); } .content :is(.record-page,.brand-store-detail-redesigned){ font-family:var(--field-font); } .content :is(.data-manager-search,.form-row,.store-editor-field) :is(input,select,textarea){ font-family:inherit; font-size:var(--field-size); } .content :is(.record-fields > .form-row,.store-editor-field) :is(input,select,textarea){ font-weight:400; line-height:1.5; } .content :is(.data-record-table,.settings-table) td{ font-size:var(--field-size); } .content :is(.mall-record-table,.brand-store-table table){ font-family:var(--field-font); font-size:var(--field-size); font-weight:400; } .content :is(.mall-record-table,.brand-store-table table) td{ color:var(--text-2); } .content :is(.mall-record-table,.brand-store-table table) th{ color:var(--text-3); font-size:var(--field-label-size); font-weight:600; line-height:1.5; } .content .settings-table td{ line-height:1.5; } .content :is(.data-record-table,.settings-table) th{ font-size:var(--field-label-size); font-weight:600; } .brand-store-table table{ line-height:1.5; } .brand-store-table td code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:400; } .brand-store-table td b, .brand-store-table .brand-store-name-link{ font-size:inherit; } /* Store archive: compact event cards with a quiet before/after comparison. */ /* ========== history ========== */ .store-history-dialog{ box-sizing:border-box; display:none; width:min(900px,calc(100vw - 48px)); max-width:none; max-height:min(88dvh,900px); margin:auto; padding:0; overflow:hidden; border:1px solid #e3e9f1; border-radius:16px; background:#fff; color:#27364a; font-family:var(--field-font); box-shadow:0 18px 60px rgba(22,39,65,.18); } .store-history-dialog[open]{ display:flex; flex-direction:column; } .store-history-dialog::backdrop{ background:rgba(26,41,62,.34); } .store-history-dialog > header{ display:flex; flex:none; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px 12px; } .store-history-dialog h2{ margin:0; font-size:18px; line-height:1.4; font-weight:600; } .store-history-dialog > header > .btn{ flex:none; } .store-history-identity{ display:flex; flex:none; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin:0 24px; padding:0 0 16px; border-bottom:1px solid #edf0f5; overflow-wrap:anywhere; } .store-history-identity > div{ display:flex; align-items:baseline; gap:7px; min-width:0; } .store-history-identity-label{ flex:none; font-size:11px; color:#738096; } .store-history-identity strong{ font-size:13px; font-weight:500; line-height:1.5; color:#36465b; } .store-history-uuid code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; line-height:1.5; color:#69788d; overflow-wrap:anywhere; } .store-history-filters{ display:grid; grid-template-columns:minmax(220px,1fr) 138px minmax(150px,.7fr) auto; align-items:end; gap:10px; margin:0 24px; padding:14px 0 12px; border-bottom:1px solid #edf0f5; } .store-history-filters label{ display:grid; gap:5px; min-width:0; } .store-history-filters label > span{ color:#78869a; font-size:11px; line-height:1.2; } .store-history-filters input, .store-history-filters select{ box-sizing:border-box; width:100%; min-height:34px; padding:7px 9px; border:1px solid #dce4ee; border-radius:8px; background:#fbfcfe; color:#34455b; font:12px/1.4 inherit; outline:none; } .store-history-filters input:focus, .store-history-filters select:focus{ border-color:#7aa9d8; background:#fff; box-shadow:0 0 0 3px rgba(76,143,208,.12); } .store-history-filters button{ min-height:34px; padding:7px 11px; white-space:nowrap; } .store-history-body{ min-height:0; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:22px 24px 6px; } .store-history-list{ display:grid; gap:12px; } .store-history-event{ min-width:0; overflow:hidden; border:1px solid #e0e7ef; border-radius:16px; background:#fff; box-shadow:0 2px 6px rgba(35,55,85,.025); } .store-history-event.is-update{ border-color:#d1e1f3; border-left-color:#4c8fd0; background:#fbfdff; } .store-history-event.is-create, .store-history-event.is-restore{ border-color:#c8e5d4; border-left-color:#3b9a6b; background:#fbfefc; } .store-history-event.is-delete{ border-color:#efd0cc; border-left-color:#c9645b; background:#fffafa; } .store-history-event-head{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; padding:12px 14px; border-bottom:1px solid #e8edf3; background:#f7f9fc; line-height:1.5; } .store-history-event.is-create .store-history-event-head, .store-history-event.is-restore .store-history-event-head{ border-bottom-color:#d9eee1; background:#edf8f1; } .store-history-event.is-delete .store-history-event-head{ border-bottom-color:#f3dedb; background:#fff0ee; } .store-history-event time{ font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; color:#35465c; } .store-history-operator{ margin-left:auto; font-size:12px; color:#6b798c; overflow-wrap:anywhere; } .store-history-action{ padding:2px 8px; border:1px solid #bfd8f2; border-radius:4px; background:#dcecff; color:#205f9f; font-size:11px; font-weight:600; } .store-history-event.is-create .store-history-action, .store-history-event.is-restore .store-history-action{ border-color:#bfe0cc; background:#dcefe3; color:#28734d; } .store-history-event.is-delete .store-history-action{ border-color:#e9c4bf; background:#f9dfdb; color:#9e4039; } .store-history-count{ font-size:11px; color:#7b8798; } .store-history-reason{ display:flex; gap:8px; margin:0; padding:8px 13px 0; font-size:12px; line-height:1.5; color:#54647a; overflow-wrap:anywhere; } .store-history-reason > span{ flex:none; color:#78869a; } .store-history-start{ flex:none; margin:10px 24px 0; color:#7b8798; font-size:11px; } .store-history-columns{ display:grid; grid-template-columns:130px minmax(0,1fr) minmax(0,1fr); gap:10px; padding:10px 14px 5px; color:#8390a1; font-size:11px; } .store-history-changes{ display:grid; gap:0; margin:0; padding:0 14px 10px; } .store-history-change{ display:grid; grid-template-columns:130px minmax(0,1fr) minmax(0,1fr); align-items:start; gap:10px; min-width:0; padding:8px 0; border-bottom:1px solid #edf0f5; font-size:13px; line-height:1.5; } .store-history-change:last-child{ border-bottom:0; } .store-history-change dt{ margin:0; padding-top:7px; color:#647287; font-size:12px; white-space:nowrap; } .store-history-change dd{ display:grid; min-width:0; min-height:34px; box-sizing:border-box; align-content:start; margin:0; padding:6px 9px; border:1px solid transparent; border-radius:8px; background:#f4f8fd; overflow-wrap:anywhere; } .store-history-change dd > span{ color:#8390a1; font-size:10px; line-height:1.25; } .store-history-change dd > strong{ color:#526176; font-size:13px; font-weight:450; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; } .history-value{ min-width:0; color:#526176; font-size:13px; font-weight:400; line-height:1.6; overflow-wrap:anywhere; word-break:break-word; } .store-history-change .store-history-before{ border-color:transparent; background:#f4f6f9; } .store-history-change .store-history-after{ border-color:transparent; background:#edf5ff; } .store-history-after .history-value{ color:#285f9b; } .history-fence{ min-width:0; } .history-fence-summary{ display:block; color:#6b798c; font-size:12px; } .history-fence svg{ display:block; width:100%; max-height:100px; margin:7px 0; border:1px solid #e2e8f0; border-radius:8px; background:#fff; } .history-fence polygon{ fill:#e1e8f1; stroke:#8a9ab0; stroke-width:1.5; vector-effect:non-scaling-stroke; } .store-history-after .history-fence polygon{ fill:#d9eaff; stroke:#4c8fd0; } .history-value-details{ min-width:0; font-weight:400; } .history-value-details summary{ color:#647b98; font-size:11px; cursor:pointer; } .history-value-details ol, .history-value-details pre{ max-height:150px; overflow:auto; margin:8px 0 0; padding:8px 8px 8px 30px; border-radius:4px; background:#fff; color:#637188; font:11px/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; } .history-value-details pre{ padding:8px; } .history-long-text summary{ display:block; color:inherit; font-size:13px; } .history-long-text summary span{ display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .history-long-text summary em{ display:block; margin-top:3px; color:#647b98; font-size:11px; font-style:normal; } .history-long-text[open] summary span, .history-long-text[open] summary em{ display:none; } .history-long-text[open] summary::after{ content:'收起全文'; color:#647b98; font-size:11px; } .history-long-text > div{ margin-top:5px; } /* ========== 品牌质量档案 ========== */ .store-history-change .store-history-after > strong{ color:#285f9b; } .store-history-event.is-create .store-history-change.is-snapshot .store-history-snapshot, .store-history-event.is-restore .store-history-change.is-snapshot .store-history-snapshot{ border:1px solid #cfe7d8; border-radius:8px; background:#eef9f2; padding:7px 9px; } .store-history-event.is-delete .store-history-change.is-snapshot .store-history-snapshot{ border:1px solid #efd1cd; border-radius:8px; background:#fff1ef; padding:7px 9px; } .store-history-arrow{ color:#a4b2c5; font-size:14px; text-align:center; } .store-history-change.is-snapshot{ grid-template-columns:130px minmax(0,1fr); } .store-history-change.is-snapshot .store-history-snapshot{ min-height:0; border:0; background:transparent; padding:0; } .store-history-change.is-snapshot .store-history-snapshot > strong{ color:#36465b; } .store-history-value-empty{ color:#8b96a6; font-size:12px; } .store-history-empty{ display:grid; min-height:140px; place-content:center; gap:8px; margin:0; text-align:center; } .store-history-empty strong{ font-size:14px; font-weight:500; } .store-history-empty span{ color:#738096; font-size:12px; line-height:1.5; } .store-history-dialog > footer{ display:flex; flex:none; align-items:center; gap:8px; margin:0 24px; padding:11px 0; border-top:1px solid #edf0f5; } .store-history-dialog footer > span{ color:#78869a; font-size:12px; } .store-history-dialog footer > span:first-child{ margin-right:auto; } @media(max-width:720px) { .store-history-dialog{ width:calc(100vw - 24px); max-height:calc(100dvh - 24px); border-radius:12px; } .store-history-dialog > header{ padding:16px 16px 10px; } .store-history-dialog h2{ font-size:18px; } .store-history-identity{ margin:0 16px; flex-direction:column; gap:5px; padding-bottom:12px; } .store-history-filters{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:0 16px; padding:12px 0 10px; } .store-history-filters .store-history-search{ grid-column:1/-1; } .store-history-filters button{ justify-self:start; } .store-history-body{ padding:18px 16px 4px; } .store-history-start{ margin:10px 16px 0; } .store-history-event-head{ gap:4px 8px; } .store-history-operator{ flex-basis:100%; margin-left:0; } .store-history-columns{ display:none; } .store-history-changes{ padding:0 10px 8px; } .store-history-change{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5px 7px; } .store-history-change dt{ grid-column:1/-1; } .store-history-change dd[aria-label]::before{ content:attr(aria-label); margin-bottom:3px; color:#8390a1; font-size:10px; } .store-history-change.is-snapshot{ grid-template-columns:minmax(0,1fr); } .store-history-dialog > footer{ margin:0 16px; } } /* Brand quality profile: one scoped desktop layout replaces the old list styles. */ /* ========== 商场数据 ========== */ .bq-page{ display:grid; gap:16px; padding:20px; color:var(--text); } .bq-page[aria-busy="true"]{ cursor:progress; } .bq-page button, .bq-page input, .bq-page select{ font:inherit; } .bq-page button{ cursor:pointer; } .bq-page button:disabled{ cursor:default; opacity:.5; } .bq-page button:focus-visible, .bq-page summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } .bq-hero{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 20px; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); border-radius:12px; background:linear-gradient(120deg,color-mix(in srgb,var(--accent-soft) 68%,var(--panel)),var(--panel)); } .bq-brand{ display:flex; align-items:center; gap:14px; min-width:0; } .bq-brand .brand-logo{ width:48px; height:48px; flex:none; } .bq-brand h2{ margin:0 0 6px; font-size:24px; font-weight:650; letter-spacing:-.6px; } .bq-brand p{ margin:0; font-size:12px; color:var(--text-3); } .bq-brand p span{ margin:0 8px; } .bq-hero-actions{ display:flex; gap:8px; flex:none; } .bq-section-caption{ display:flex; align-items:center; gap:18px; justify-content:space-between; } .bq-section-caption h3{ margin:0; font-size:14px; font-weight:650; } .bq-section-caption>span{ font-size:11px; color:var(--text-3); } .bq-metrics{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; } .bq-metric{ position:relative; text-align:left; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text); box-shadow:0 3px 10px rgba(20,50,90,.025); transition:border-color .15s,background .15s,box-shadow .15s,transform .15s; } button.bq-metric:hover{ border-color:color-mix(in srgb,var(--accent) 50%,var(--border)); background:var(--accent-soft); } button.bq-metric:active{ transform:translateY(1px); } button.bq-metric.is-active{ border-color:var(--accent); background:linear-gradient(135deg,var(--accent-soft),var(--panel)); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent),0 6px 16px rgba(30,95,170,.1); } button.bq-metric.is-active::after{ content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:3px; border-radius:4px 4px 0 0; background:var(--accent); } .bq-metric>span{ color:var(--text-2); font-size:12px; font-weight:550; } .bq-metric>strong{ display:block; margin:9px 0 6px; font-size:29px; font-weight:650; letter-spacing:-.8px; font-variant-numeric:tabular-nums; line-height:1.2; } .bq-metric strong small{ margin-left:5px; font-size:12px; font-weight:500; letter-spacing:0; color:var(--text-3); } .bq-metric p{ margin:0; color:var(--text-3); font-size:11px; line-height:1.5; } .bq-metric.is-blue{ background:var(--panel); } .bq-metric.is-blue strong{ color:var(--accent); } .bq-metric.is-amber strong{ color:#b77a28; } .bq-metric.is-teal strong{ color:#208576; } /* Quality verdict and reporting hierarchy. */ .bq-eyebrow, .bq-card>header>div>span.bq-eyebrow{ display:block; margin:0 0 7px; font-size:11px; font-weight:650; letter-spacing:1px; color:var(--accent); } .bq-verdict{ display:flex; justify-content:space-between; align-items:center; gap:28px; padding:20px 24px; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); border-radius:16px; background:linear-gradient(110deg,var(--accent-soft),var(--panel)); } .bq-verdict h3{ margin:0; font-size:20px; line-height:1.4; font-weight:650; letter-spacing:-.4px; } .bq-verdict p{ margin:8px 0 0; color:var(--text-2); font-size:12px; line-height:1.7; } .bq-verdict-coverage{ display:grid; gap:5px; flex:none; min-width:164px; padding-left:28px; border-left:1px solid var(--border); } .bq-verdict-coverage strong{ font-size:34px; line-height:1.1; color:var(--accent); font-weight:650; letter-spacing:-1px; font-variant-numeric:tabular-nums; } .bq-verdict-coverage small{ font-size:14px; margin-left:5px; } .bq-verdict-coverage>span{ font-size:11px; color:var(--text-3); } .bq-verdict.is-unavailable{ background:var(--hover); border-color:var(--border); } .bq-verdict.is-unavailable h3, .bq-verdict.is-unavailable strong{ color:var(--text-2); } .bq-results{ border-top:3px solid color-mix(in srgb,var(--accent) 55%,var(--panel)); } .bq-results>header{ margin-bottom:18px; } .bq-impact-summary{ display:grid; grid-template-columns:1fr 1.7fr; gap:24px; margin-top:16px; padding-top:14px; border-top:1px solid var(--row-line); } .bq-impact-summary>div{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 16px; } .bq-impact-summary span{ color:var(--text-2); font-size:12px; font-weight:550; } .bq-impact-summary strong{ color:var(--accent); font-size:20px; font-weight:650; } .bq-impact-summary small{ margin-left:6px; font-size:11px; font-weight:400; color:var(--text-3); } .bq-impact-summary p{ grid-column:1/-1; margin:0; font-size:11px; color:var(--text-3); line-height:1.6; } .bq-other-activity{ margin-top:14px; padding-top:12px; border-top:1px solid var(--row-line); } .bq-other-activity summary{ cursor:pointer; font-size:11px; color:var(--text-3); } .bq-other-activity .bq-result-bars{ margin-top:12px; } .bq-awaiting{ padding:18px 20px; border:1px dashed var(--border); border-radius:12px; } .bq-awaiting h3{ margin:0 0 12px; font-size:13px; color:var(--text-2); } .bq-awaiting>div{ display:flex; gap:24px; color:var(--text-3); font-size:12px; } .bq-scope-note{ margin:0; padding:0 18px 15px; color:var(--text-3); font-size:11px; line-height:1.8; } .bq-details{ scroll-margin-top:16px; } .bq-analysis-grid{ display:grid; grid-template-columns:1fr 1fr 1.15fr; gap:12px; } .bq-card{ min-width:0; padding:18px; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb,var(--panel) 92%,var(--accent-soft)); } .bq-card>header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; } .bq-card h3{ margin:0; font-size:14px; font-weight:650; letter-spacing:-.2px; } .bq-card>header span{ font-size:11px; color:var(--text-3); } .bq-card>header>div>span{ display:block; margin-top:5px; } .bq-note{ margin:13px 0 0; font-size:11px; line-height:1.65; color:var(--text-3); } .bq-confidence-bar{ display:flex; height:11px; overflow:hidden; gap:2px; border-radius:8px; background:var(--hover); } .bq-confidence-bar i, .bq-confidence-legend i{ background:#9daec2; } .bq-confidence-bar .is-high, .bq-confidence-legend .is-high{ background:#328f80; } .bq-confidence-bar .is-fair, .bq-confidence-legend .is-fair{ background:#5a91d8; } .bq-confidence-bar .is-medium, .bq-confidence-legend .is-medium{ background:#a7b6ca; } .bq-confidence-legend{ display:grid; margin-top:13px; } .bq-confidence-legend button{ display:flex; gap:9px; align-items:center; padding:9px 3px; border:0; border-bottom:1px solid var(--row-line); background:none; text-align:left; color:var(--text); } .bq-confidence-legend button:last-child{ border-bottom:0; } .bq-confidence-legend button:hover{ background:var(--hover); } .bq-confidence-legend i{ width:8px; height:8px; border-radius:4px; flex:none; } .bq-confidence-legend button>span{ display:flex; align-items:center; gap:8px; } .bq-confidence-legend b{ font-size:12px; } .bq-confidence-legend small{ color:var(--text-3); font-size:11px; } .bq-confidence-legend strong{ margin-left:auto; font-size:14px; font-weight:650; font-variant-numeric:tabular-nums; } .bq-confidence-legend strong small{ margin-left:4px; font-weight:400; } .bq-bars, .bq-result-bars{ display:grid; gap:9px; } .bq-bar-row{ display:grid; grid-template-columns:125px minmax(30px,1fr) 34px; align-items:center; gap:10px; padding:3px 0; border:0; background:none; color:var(--text-2); text-align:left; font-size:12px !important; } .bq-bar-row:hover{ color:var(--accent); } .bq-bar-track{ height:6px; border-radius:4px; overflow:hidden; background:var(--hover); } .bq-bar-track i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,var(--panel)),var(--accent)); } .bq-bar-row b{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; } .bq-offset-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 12px; } .bq-offset-stats strong{ display:block; font-size:22px; color:var(--accent); font-weight:650; letter-spacing:-.6px; } .bq-offset-stats small{ display:block; margin-top:5px; font-size:11px; color:var(--text-3); } .bq-offset-bins{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; height:89px; align-items:end; } .bq-offset-bins>div{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; padding-bottom:16px; } .bq-offset-bins i{ width:100%; max-width:45px; background:color-mix(in srgb,var(--accent) 28%,var(--panel)); border-radius:4px 4px 0 0; } .bq-offset-bins b{ position:absolute; bottom:18px; font-size:11px; color:var(--accent); } .bq-offset-bins span{ position:absolute; bottom:0; font-size:10px; white-space:nowrap; color:var(--text-3); } .bq-period{ display:flex; gap:8px; align-items:center; font-size:12px; } .bq-period label{ display:flex; gap:10px; align-items:center; color:var(--text-2); font-size:12px; } .bq-period input, .bq-detail-toolbar input, .bq-detail-toolbar select{ min-width:0; height:33px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); border-radius:8px; padding:5px 9px; font-size:12px; outline:none; } .bq-period input{ width:135px; } .bq-period input:focus, .bq-detail-toolbar input:focus, .bq-detail-toolbar select:focus{ border-color:var(--accent); } .bq-results-content{ display:grid; grid-template-columns:290px 1fr; gap:28px; } .bq-result-totals{ display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:14px; padding-right:20px; border-right:1px solid var(--row-line); } .bq-result-totals strong{ display:block; color:var(--accent); font-size:26px; font-weight:650; } .bq-result-totals span{ display:block; margin-top:6px; font-size:11px; color:var(--text-2); } .bq-result-totals p{ grid-column:1/-1; margin:0; font-size:11px; color:var(--text-3); line-height:1.65; } .bq-result-bars{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; align-content:start; } .bq-result-bars>.bq-empty{ grid-column:1/-1; } .bq-text-link{ padding:0; border:0; background:none; color:var(--accent); text-decoration:none; font-size:12px !important; } .bq-text-link:hover{ text-decoration:underline; } .bq-source-panel{ border:1px solid var(--border); border-radius:12px; background:var(--panel); } .bq-source-panel>summary{ display:flex; justify-content:space-between; gap:16px; align-items:center; padding:15px 18px; cursor:pointer; list-style:none; } .bq-source-panel summary::-webkit-details-marker, .bq-event summary::-webkit-details-marker{ display:none; } .bq-source-panel summary b{ font-size:13px; font-weight:600; } .bq-source-panel summary small{ margin-left:15px; font-size:11px; color:var(--text-3); } .bq-source-panel summary>span:last-child{ font-size:11px; color:var(--accent); flex:none; } .bq-source-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:0 18px 18px; } .bq-source-grid h4{ font-size:12px; margin:5px 0 10px; } .bq-details>header{ margin-bottom:15px; align-items:flex-start; } .bq-tabs{ display:flex; gap:3px; padding:3px; border:1px solid var(--border); border-radius:8px; background:var(--hover); } .bq-tabs button{ padding:7px 10px; border:1px solid transparent; border-radius:8px; background:none; color:var(--text-3); font-size:12px; white-space:nowrap; } .bq-tabs button[aria-selected="true"]{ background:var(--panel); border-color:var(--border); color:var(--accent); box-shadow:0 1px 4px rgba(0,30,70,.04); } .bq-tabs b{ margin-left:6px; font-weight:600; } .bq-detail-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:14px; } .bq-detail-toolbar input{ width:320px; } .bq-detail-toolbar select{ width:185px; } .bq-detail-toolbar>span{ margin-left:auto; font-size:11px; color:var(--text-3); } .bq-empty{ display:flex; align-items:center; justify-content:center; gap:12px; padding:28px 12px; font-size:12px; line-height:1.6; color:var(--text-3); text-align:center; } .bq-notice{ padding:14px 18px; border-radius:8px; background:var(--accent-soft); color:var(--text-2); font-size:12px; } .bq-table{ width:100%; table-layout:fixed; border-collapse:collapse; font-size:12px; } .bq-table th{ padding:10px 12px; text-align:left; font-size:11px; font-weight:600; color:var(--text-3); background:var(--hover); border-bottom:1px solid var(--row-line); } .bq-table td{ padding:12px; color:var(--text-2); vertical-align:middle; overflow-wrap:anywhere; border-bottom:1px solid var(--row-line); line-height:1.65; } .bq-table tr:last-child td{ border-bottom:0; } .bq-table td small{ display:block; color:var(--text-3); font-size:11px; } .bq-table-wrap{ overflow:hidden; border:1px solid var(--row-line); border-radius:8px; } .bq-table-wrap .bq-table th:nth-child(1){ width:24%; } .bq-table-wrap .bq-table th:nth-child(2){ width:29%; } .bq-table-wrap .bq-table th:nth-child(3){ width:15%; } .bq-table-wrap .bq-table th:nth-child(4){ width:10%; } .bq-table-wrap .bq-table th:nth-child(5){ width:22%; } .bq-store-name{ display:grid; gap:5px; } .bq-store-name button{ text-align:left; font-weight:600; line-height:1.5; } .bq-store-name small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono,monospace); font-size:10px !important; } .bq-tags{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; } .bq-tag{ display:inline-flex; align-items:center; white-space:nowrap; padding:3px 7px; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); border-radius:4px; color:var(--accent); background:var(--accent-soft); font-size:11px; line-height:1.3; } .bq-tag.is-amber{ color:#a77624; background:color-mix(in srgb,#e4b968 12%,var(--panel)); border-color:color-mix(in srgb,#e4b968 30%,var(--border)); } .bq-tag.is-neutral, .bq-tag.is-medium{ color:var(--text-3); background:var(--hover); border-color:var(--border); } .bq-tag.is-high{ color:#278372; background:color-mix(in srgb,#329989 10%,var(--panel)); border-color:color-mix(in srgb,#329989 22%,var(--border)); } .bq-tag.is-fair{ color:#4b83ca; background:color-mix(in srgb,#6b9ddc 10%,var(--panel)); border-color:color-mix(in srgb,#6b9ddc 25%,var(--border)); } .bq-evidence-list{ border:1px solid var(--row-line); border-radius:12px; overflow:hidden; } .bq-event{ border-bottom:1px solid var(--row-line); } .bq-event:last-child{ border-bottom:0; } .bq-event>summary{ display:grid; grid-template-columns:150px minmax(190px,1fr) minmax(220px,.8fr) 80px; gap:15px; align-items:center; padding:14px; list-style:none; cursor:pointer; } .bq-event>summary:hover, .bq-event[open]>summary{ background:var(--hover); } .bq-event-time time{ display:block; font-size:11px; color:var(--text-2); font-variant-numeric:tabular-nums; } .bq-event-time small, .bq-event-name small{ display:block; margin-top:5px; font-size:11px; color:var(--text-3); overflow-wrap:anywhere; } .bq-event-name strong{ font-size:12px; font-weight:600; line-height:1.6; } .bq-event-toggle{ justify-self:end; font-size:11px; color:var(--accent); white-space:nowrap; } .bq-event-toggle i{ display:inline-block; font-style:normal; margin-left:4px; transition:transform .15s; } .bq-event[open] .bq-event-toggle i{ transform:rotate(180deg); } .bq-event-body{ padding:0 16px 16px; background:color-mix(in srgb,var(--accent-soft) 30%,var(--panel)); } .bq-event-context{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px 0; font-size:11px; color:var(--text-3); } .bq-event-context code{ margin-left:5px; color:var(--text-2); overflow-wrap:anywhere; } .bq-event-context>button{ margin-left:auto; } .bq-change-heading, .bq-changes>div{ display:grid; grid-template-columns:140px minmax(0,1fr) minmax(0,1fr); gap:14px; } .bq-change-heading{ padding:9px 12px; font-size:11px; color:var(--text-3); } .bq-changes{ margin:0; border:1px solid var(--row-line); border-radius:8px; overflow:hidden; background:var(--panel); } .bq-changes>div{ border-bottom:1px solid var(--row-line); padding:10px 12px; font-size:12px; line-height:1.65; } .bq-changes>div:last-child{ border-bottom:0; } .bq-changes dt{ font-weight:550; color:var(--text-2); } .bq-changes dd{ margin:0; overflow-wrap:anywhere; } .bq-changes dd:first-of-type{ color:var(--text-3); } .bq-changes dd:last-of-type{ color:var(--accent); } .bq-event-note{ display:flex; gap:12px; align-items:flex-start; font-size:12px; line-height:1.65; color:var(--text-2); margin:14px 0 0; overflow-wrap:anywhere; } .bq-event-note b{ white-space:nowrap; font-size:11px; font-weight:550; color:var(--text-3); } .bq-pagination{ display:flex; align-items:center; justify-content:flex-end; gap:8px; padding-top:14px; } .bq-pagination>span{ margin-right:6px; font-size:11px; color:var(--text-3); } @media (max-width:1250px) and (min-width:900px) { .bq-page{ padding:16px; } .bq-metric{ padding:13px; } .bq-card{ padding:15px; } .bq-card>header{ flex-wrap:wrap; } .bq-confidence-legend button>span{ display:grid; gap:2px; } .bq-period{ margin-left:auto; } .bq-results-content{ grid-template-columns:250px 1fr; gap:18px; } .bq-result-bars{ column-gap:15px; } .bq-bar-row{ grid-template-columns:112px minmax(20px,1fr) 28px; gap:7px; } } /* Mall lists reserve space for the shared status tag and never overlap columns. */ .mall-record-table{ min-width:1020px; } .mall-record-table .data-col-id{ width:10%; } .mall-record-table .data-col-name{ width:20%; } .mall-record-table .data-col-region{ width:8%; } .mall-record-table .data-col-coordinate{ width:24%; } .mall-record-table .data-col-status{ width:8%; } .mall-record-table .data-col-actions{ width:14%; } /* Shared save review uses the same field typography and compact previews everywhere. */ .record-change-dialog{ font-family:var(--field-font); } .record-change-dialog .brand-change-item h3{ align-items:baseline; flex-wrap:wrap; } .record-change-dialog .brand-change-item h3 > span{ flex:none; } .record-change-dialog .history-fence svg{ width:100%; max-height:100px; } .record-change-dialog .history-value-details{ max-width:100%; } .record-change-dialog .brand-change-before, .record-change-dialog .brand-change-after{ min-width:0; } .record-change-dialog .review-avatar{ width:64px; height:64px; border-radius:16px; object-fit:cover; } /* Brand store exports start with an explicit, searchable brand scope. */ .delivery-create-page .delivery-brand-scope{ display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; } .delivery-brand-scope label{ flex: 0 1 320px; min-width: 0; } .delivery-brand-scope select{ width: 100%; } .delivery-brand-scope > small{ flex: 1 1 200px; color: var(--text-3); font-size: 12px; line-height: 1.6; } .delivery-brand-scope [data-filter-status]{ width: 100%; margin: 0; color: var(--text-3); } .delivery-brand-scope label{ flex: 1 1 220px; } .delivery-brand-scope > small{ flex-basis: 100%; } /* Business recycle entries keep their identity and actions readable. */ .recycle-table{ min-width: 980px; } .recycle-table th:nth-child(3){ width: 9%; } .recycle-table th:nth-child(4){ width: 12%; } .recycle-table th:last-child{ width: 185px; } .recycle-table td{ overflow-wrap: anywhere; } .recycle-table td.row-actions{ white-space: nowrap; } /* The breadcrumb is the page locator. When the toolbar repeats its current item, remove that duplicate and give the content panel the reclaimed space. Actions remain in the toolbar when the page needs them. */ .toolbar.is-breadcrumb-only{ display: none; } .toolbar-title.is-breadcrumb-duplicate{ display: none; } .toolbar:has(.toolbar-title.is-breadcrumb-duplicate) #recordPageActions{ margin-left: auto; } .toolbar:has(.toolbar-title.is-breadcrumb-duplicate) .toolbar-actions{ margin-left: auto; } /* Keep computed status aligned with the original form controls. */ .mall-computed-badge{ display:inline-flex; align-items:center; margin-left:6px; padding:1px 5px; border:1px solid var(--border); border-radius:4px; background:color-mix(in srgb,var(--text) 4%,var(--panel)); color:var(--text-2); font-size:11px; font-weight:400; line-height:18px; vertical-align:middle; white-space:nowrap; }