:root { --ink:#172033; --muted:#687386; --line:#e2e6ee; --surface:#fff; --canvas:#f6f7fb; --blue:#2463eb; --green:#15803d; --orange:#c55f11; --red:#c63748; --violet:#7152c8; --radius:8px; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); font:14px/1.45 Inter,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--canvas); }
button,input,select { font:inherit; } button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:222px minmax(0,1fr); }
.sidebar { background:#161d2b; color:#d7ddea; padding:18px 12px; display:flex; flex-direction:column; min-height:100vh; position:sticky; top:0; height:100vh; }
.brand { min-height:66px; display:flex; align-items:center; gap:12px; padding:5px 10px 17px; color:#fff; border-bottom:1px solid #2a3547; }
.brand-mark { position:relative; width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; background:#a92733; border:1px solid #d36069; border-radius:6px; box-shadow:inset 0 0 0 3px #8e1f2a; }
.brand-mark::after { content:""; position:absolute; right:5px; bottom:5px; width:6px; height:2px; background:#f2c9cd; }
.brand-mark b { color:#fff; font-size:18px; font-weight:750; line-height:1; }
.brand-copy { min-width:0; display:grid; align-content:center; line-height:1.2; }.brand-copy strong { color:#fff; font-size:17px; font-weight:700; white-space:nowrap; }.brand-copy small { margin-top:5px; color:#aeb8c9; font-size:10px; font-weight:500; white-space:nowrap; }
.nav { display:grid; gap:4px; margin-top:18px; }.nav-item { width:100%; color:#c5cede; border:0; background:transparent; min-height:40px; display:flex; align-items:center; gap:11px; padding:0 11px; text-align:left; border-radius:6px; }.nav-item span { width:16px; text-align:center; color:#97a4b8; }.nav-item:hover { background:#222d3f; color:#fff; }.nav-item.active { background:#264f94; color:#fff; }.nav-item.active span { color:#b8d2ff; }.nav-item b { margin-left:auto; min-width:18px; height:18px; display:grid; place-items:center; background:#c63748; color:#fff; border-radius:9px; font-size:11px; }
.sidebar-footer { margin-top:auto; padding:12px 10px 0; border-top:1px solid #2a3547; font-size:12px; color:#97a4b8; }.online-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#3bc978; margin-right:5px; }
.workspace { min-width:0; }.app-shell.auth-mode { display:block; }.topbar { height:80px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; }.eyebrow { margin:0 0 2px; font-size:12px; color:var(--muted); }.topbar h1 { font-size:19px; margin:0; letter-spacing:0; }.top-actions { display:flex; gap:10px; align-items:center; }.search { height:36px; width:260px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); padding:0 10px; border-radius:6px; color:#8a95a5; }.search input { width:100%; border:0; outline:0; color:var(--ink); }.top-actions select { height:36px; border:1px solid var(--line); background:#fff; padding:0 10px; border-radius:6px; color:var(--ink); }.icon-button { width:36px; height:36px; border:1px solid var(--line); background:#fff; border-radius:6px; color:var(--ink); }.user-menu { min-height:36px; border:1px solid var(--line); background:#fff; padding:5px 10px; border-radius:6px; display:grid; text-align:left; gap:0; color:var(--ink); }.user-menu small { color:var(--muted); font-size:11px; }.auth-workspace { display:block; min-height:100vh; background:#eef1f5; }.auth-workspace .topbar { display:none; }.auth-workspace #page { width:100%; max-width:none; min-height:100vh; padding:36px; display:grid; place-items:center; }.auth-shell { width:min(900px,calc(100vw - 72px)); min-height:540px; display:grid; grid-template-columns:360px minmax(0,1fr); background:#fff; border:1px solid #dce1e9; border-radius:8px; overflow:hidden; box-shadow:0 24px 70px #25334a18; }.auth-brand-panel { padding:46px 42px 38px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; background:#192130; border-left:5px solid #b4232f; }.auth-brand-mark { width:52px; height:52px; display:grid; place-items:center; margin-bottom:40px; color:#fff; background:#b4232f; border:1px solid #d36a72; border-radius:6px; font-size:24px; font-weight:750; }.auth-company { margin:0 0 8px; color:#d8deea; font-size:16px; font-weight:650; }.auth-brand-panel h1 { margin:0; max-width:250px; color:#fff; font-size:30px; line-height:1.25; }.auth-brand-note { margin:16px 0 0; color:#aeb9ca; font-size:13px; }.auth-brand-footer { padding-top:24px; border-top:1px solid #303b4d; color:#98a4b7; font-size:12px; }.auth-panel { padding:54px 64px 36px; display:flex; flex-direction:column; min-width:0; }.auth-kicker { margin:0 0 30px; color:#b4232f; font-size:12px; font-weight:650; }.auth-panel h2 { margin:0; color:#172033; font-size:28px; }.auth-intro { margin:8px 0 28px; color:var(--muted); font-size:14px; }.auth-form { padding:0; gap:18px; }.auth-form label { gap:8px; color:#303c50; font-weight:600; }.auth-form input { width:100%; height:46px; padding:0 13px; border-color:#c8d0dc; border-radius:5px; font-weight:400; }.auth-form input:focus { border-color:#2463eb; outline:3px solid #e3edff; }.password-field { position:relative; }.password-field input { padding-right:64px; }.password-toggle { position:absolute; top:1px; right:1px; width:58px; height:44px; border:0; background:transparent; color:#536074; font-size:12px; }.password-toggle:hover { color:#1748ae; }.auth-submit { width:100%; min-height:46px; margin-top:4px; }.auth-error { color:var(--red); min-height:20px; margin-top:10px; font-size:13px; }.auth-copyright { margin:auto 0 0; padding-top:22px; color:#98a1b0; font-size:11px; text-align:center; }.account-table td:first-child { display:grid; gap:2px; }.account-table .tag { min-width:72px; justify-content:center; }
.page { padding:26px 32px 48px; max-width:1720px; }.toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }.toolbar h2 { margin:0; font-size:16px; }.toolbar p { margin:3px 0 0; color:var(--muted); font-size:13px; }.toolbar-note { margin:0 !important; color:var(--muted); font-size:13px; }.filters { display:flex; gap:8px; flex-wrap:wrap; }.filter-chip { border:1px solid var(--line); background:#fff; color:#475268; min-height:32px; padding:0 10px; border-radius:6px; }.filter-chip.selected { color:#1748ae; border-color:#91b6ff; background:#edf4ff; }.primary { background:var(--blue); color:#fff; border:1px solid var(--blue); border-radius:6px; min-height:36px; padding:0 14px; font-weight:600; }.secondary { background:#fff; color:#263247; border:1px solid var(--line); border-radius:6px; min-height:34px; padding:0 11px; }.danger { color:var(--red); }
.metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:22px; }.metric { background:var(--surface); border:1px solid var(--line); padding:16px; min-height:112px; border-radius:var(--radius); }.metric-label { color:var(--muted); font-size:13px; }.metric-value { margin-top:10px; font-size:30px; font-weight:750; letter-spacing:0; }.metric-note { margin-top:4px; font-size:12px; color:#7c8798; }.metric.alert .metric-value { color:var(--red); }.metric.green .metric-value { color:var(--green); }.metric.orange .metric-value { color:var(--orange); }
.content-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr); gap:16px; }.panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px; border-bottom:1px solid var(--line); }.panel-head h3 { font-size:15px; margin:0; }.panel-head a { color:var(--blue); font-size:13px; cursor:pointer; }.flow { display:grid; grid-template-columns:repeat(6,1fr); padding:19px 14px; gap:4px; }.flow-step { text-align:center; position:relative; color:#687386; font-size:12px; }.flow-step:not(:last-child)::after { content:""; position:absolute; top:11px; left:64%; width:74%; height:1px; background:#d9dee8; }.flow-dot { position:relative; z-index:1; margin:0 auto 8px; width:22px; height:22px; display:grid; place-items:center; color:#fff; border-radius:50%; background:#a8b2c0; font-size:11px; }.flow-step.done .flow-dot { background:var(--green); }.flow-step.active .flow-dot { background:var(--blue); box-shadow:0 0 0 4px #e7f0ff; }.feed { list-style:none; padding:2px 16px 12px; margin:0; }.feed li { display:flex; gap:10px; padding:11px 0; border-bottom:1px solid #eef0f4; }.feed li:last-child { border-bottom:0; }.feed-mark { width:8px; height:8px; margin-top:6px; border-radius:50%; background:#5a88e9; flex:0 0 auto; }.feed-title { font-size:13px; }.feed-meta { font-size:12px; color:var(--muted); margin-top:2px; }.feed-change { margin-top:4px; color:#355b99; font-size:12px; }
.dashboard-toolbar { min-height:44px; display:flex; align-items:center; gap:18px; margin:-4px 0 14px; padding-bottom:12px; border-bottom:1px solid var(--line); }.dashboard-toolbar > div { display:grid; gap:2px; margin-right:auto; }.dashboard-toolbar > div strong { font-size:14px; }.dashboard-toolbar > div span,.dashboard-updated { color:var(--muted); font-size:12px; }.dashboard-toolbar label { display:flex; align-items:center; gap:8px; color:#4f5c70; font-size:12px; white-space:nowrap; }.dashboard-toolbar select { min-width:132px; min-height:34px; padding:0 9px; border:1px solid #cbd3df; border-radius:5px; background:#fff; color:var(--ink); }
.dashboard-modules,.dashboard-attention { margin-bottom:16px; }.dashboard-modules { overflow:auto; }.dashboard-modules > .panel-head,.dashboard-module-head,.dashboard-module-row { min-width:850px; }.panel-head > div { display:grid; gap:2px; }.compact-button { min-height:30px; font-size:12px; }.dashboard-module-head,.dashboard-module-row { display:grid; grid-template-columns:130px 72px 72px 72px 72px minmax(220px,1fr) 60px; gap:12px; align-items:center; }.dashboard-module-head { min-height:38px; padding:0 16px; color:#7a8596; background:#f8f9fc; border-bottom:1px solid var(--line); font-size:11px; font-weight:600; }.dashboard-module-head span:not(:first-child) { text-align:center; }.dashboard-module-row { min-height:64px; padding:10px 16px; border-bottom:1px solid #edf0f4; }.dashboard-module-row:last-child { border-bottom:0; }.dashboard-module-row > strong { text-align:center; font-size:17px; }.dashboard-module-name { display:grid; gap:1px; padding:0; border:0; background:transparent; color:var(--ink); text-align:left; font-size:15px; font-weight:700; }.dashboard-module-name span { color:var(--blue); font-size:10px; font-weight:500; }.done-count { color:var(--green); }.doing-count { color:var(--orange); }.module-progress { display:grid; grid-template-columns:minmax(100px,1fr) 42px; align-items:center; gap:10px; }.module-progress > span { color:#536074; text-align:right; font-size:12px; font-weight:650; }.module-progress-bar { height:8px; display:flex; overflow:hidden; border-radius:4px; background:#edf0f4; }.module-progress-bar i { height:100%; }.module-progress-bar .done { background:#269353; }.module-progress-bar .doing { background:#dc791d; }.risk-count { min-width:34px; min-height:30px; justify-self:center; border:1px solid #dce2eb; border-radius:5px; background:#fff; color:#7a8596; font-weight:700; }.risk-count.has-risk { color:var(--red); border-color:#efb9c0; background:#fff3f4; }
.attention-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); }.attention-item { min-height:78px; display:grid; align-content:center; gap:4px; padding:12px; border:0; border-right:1px solid #edf0f4; background:#fff; text-align:left; }.attention-item:last-child { border-right:0; }.attention-item:hover { background:#f8faff; }.attention-item span { color:#667286; font-size:11px; }.attention-item strong { color:#263247; font-size:22px; }
.dashboard-lower { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); gap:16px; }.dashboard-risks,.dashboard-activity { min-height:260px; }.risk-list { display:grid; }.risk-item { width:100%; min-height:56px; display:grid; grid-template-columns:44px minmax(0,1fr) 110px; gap:10px; align-items:center; padding:9px 16px; border:0; border-bottom:1px solid #edf0f4; background:#fff; text-align:left; }.risk-item:last-child { border-bottom:0; }.risk-item:hover { background:#fbfcff; }.risk-level { width:38px; min-height:22px; display:grid; place-items:center; border-radius:4px; color:#9d4d0f; background:#fff1df; font-size:10px; }.risk-level.overdue { color:#ae2637; background:#ffeaed; }.risk-copy { min-width:0; display:grid; gap:2px; }.risk-copy strong { font-size:12px; }.risk-copy small,.risk-owner small { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.risk-owner { display:grid; gap:2px; color:#435066; text-align:right; font-size:11px; }.dashboard-empty { min-height:175px; }.dashboard-lower .dashboard-activity .feed { display:grid; grid-template-columns:1fr; padding:0 16px; }.dashboard-lower .dashboard-activity .feed li { min-width:0; border-right:0; border-bottom:1px solid #eef0f4; padding:12px 2px; }.dashboard-lower .dashboard-activity .feed li:last-child { border-bottom:0; }.dashboard-lower .dashboard-activity .feed-title,.dashboard-lower .dashboard-activity .feed-meta { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.empty-state.compact { padding:18px 20px; grid-template-columns:auto 1fr; justify-content:center; align-items:center; }
.alert-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }.risk-table { min-width:880px; }.risk-table td:nth-child(2) { width:auto; }.risk-table td:nth-child(4) { min-width:250px; }
.table-wrap { overflow:auto; }.product-table { width:100%; border-collapse:collapse; min-width:970px; }.product-table th { background:#f8f9fc; color:#5d6879; font-weight:600; font-size:12px; white-space:nowrap; padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; }.product-table td { padding:10px 12px; border-bottom:1px solid #edf0f4; vertical-align:middle; }.product-table td:nth-child(2) { width:100px; }.product-table tr:hover td { background:#fbfcff; }.product-table tr:last-child td { border-bottom:0; }.style-code { color:#1748ae; font-weight:700; white-space:nowrap; }.product-image { width:76px; height:104px; object-fit:cover; object-position:center; background:#fff; border:1px solid #e2e6ee; display:block; border-radius:5px; }.previewable-image { cursor:zoom-in; transition:border-color .15s ease,box-shadow .15s ease; }.previewable-image:hover,.previewable-image:focus-visible { border-color:#78a4ff; box-shadow:0 0 0 3px #dce9ff; outline:0; }.tag { display:inline-flex; align-items:center; min-height:23px; padding:0 8px; border-radius:12px; font-size:12px; white-space:nowrap; }.tag.blue { color:#1748ae; background:#eaf2ff; }.tag.green { color:#117538; background:#e7f7ed; }.tag.orange { color:#a34d0d; background:#fff1df; }.tag.red { color:#b72d3c; background:#ffeaed; }.tag.gray { color:#536074; background:#eef1f5; }.action-link { border:0; background:transparent; color:var(--blue); font-weight:600; padding:5px 0; }.stack { display:grid; gap:2px; }.subtle { color:var(--muted); font-size:12px; }.empty-state { padding:46px 20px; text-align:center; display:grid; gap:6px; color:var(--muted); }.empty-state strong { color:#344052; }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }.pagination-actions { display:flex; gap:8px; }.pagination button:disabled { opacity:.45; cursor:not-allowed; }
.row-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-width:126px; }.row-actions .primary { min-height:32px; padding:0 10px; font-size:12px; }.row-actions .action-link { white-space:nowrap; }
.role-banner { border:1px solid #b9d0ff; background:#eff5ff; padding:12px 14px; display:flex; align-items:center; gap:12px; margin-bottom:16px; border-radius:6px; }.role-banner strong { color:#1748ae; }.role-banner span { color:#4f5e72; font-size:13px; }.role-banner button { margin-left:auto; }
.work-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }.work-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; transition:border-color .15s ease,box-shadow .15s ease; }.work-card.is-drilldown { border-color:#8eb3f5; box-shadow:0 0 0 3px #e6efff; }.work-card h3 { margin:0; font-size:15px; }.work-card p { margin:7px 0 14px; color:var(--muted); min-height:38px; font-size:13px; }.work-card .number { margin-top:4px; font-size:25px; font-weight:750; }.work-card-number { display:inline-flex; align-items:baseline; gap:9px; padding:0; border:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }.work-card-number span { color:var(--blue); font-size:12px; font-weight:650; opacity:.72; }.work-card-number:hover,.work-card-number:focus-visible,.work-card-number.active { color:#1748ae; outline:0; }.work-card-number:hover span,.work-card-number:focus-visible span,.work-card-number.active span { opacity:1; text-decoration:underline; }.work-card-number:focus-visible { box-shadow:0 0 0 3px #dce9ff; border-radius:3px; }.work-card-zero { color:#172033; cursor:default; }.work-detail-anchor { scroll-margin-top:16px; }.two-columns { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }
.work-filter-bar { display:grid; gap:12px; margin-bottom:16px; padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }.work-filter-title { display:flex; align-items:baseline; gap:10px; }.work-filter-title strong { font-size:14px; }.work-filter-title span,.work-filter-result { color:var(--muted); font-size:12px; }.work-filter-controls { display:grid; grid-template-columns:minmax(360px,1.45fr) minmax(170px,.7fr) minmax(190px,.8fr) auto; gap:10px; align-items:end; }.work-filter-field { display:grid; gap:6px; color:#405066; font-size:12px; }.work-filter-field input,.work-filter-field select { width:100%; min-height:38px; border:1px solid #cbd3df; border-radius:5px; padding:7px 9px; color:var(--ink); background:#fff; }.date-range { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:7px; }.date-range i { color:var(--muted); font-style:normal; font-size:12px; }.work-filter-reset { min-height:38px; }.work-filter-reset:disabled { opacity:.45; cursor:not-allowed; }.work-filter-result { text-align:right; }.work-filter-result strong { color:#1748ae; font-size:14px; }
.order-toolbar { margin:4px 0 10px; }.order-toolbar .filters { align-items:center; }.order-table { min-width:1750px; }.order-table td:nth-child(2) { width:100px; }.compact-order-lines { display:block; min-width:155px; max-width:240px; line-height:1.55; white-space:normal; color:#44546b; }.order-product-picker { display:grid; gap:6px; position:relative; }.order-product-picker > label { display:block; }.order-product-search { height:42px; display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid #cbd3df; border-radius:6px; background:#fff; color:#7c899b; }.order-product-search:focus-within { border-color:var(--blue); outline:3px solid #e3edff; }.order-product-search > span { font-size:20px; line-height:1; }.order-product-search input { min-width:0; flex:1; height:38px; padding:0; border:0; outline:0; }.order-product-search input.has-selection { color:#1748ae; font-weight:650; }.order-search-clear { width:24px; height:24px; padding:0; border:0; border-radius:50%; background:#e9edf3; color:#536074; font-size:17px; line-height:1; }.order-search-clear:hover { background:#dce4f0; }.order-product-results { position:absolute; left:0; right:0; top:70px; z-index:4; display:grid; max-height:330px; overflow:auto; padding:5px; border:1px solid #cbd5e3; border-radius:7px; background:#fff; box-shadow:0 12px 30px #25334a24; }.order-product-result { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:9px; width:100%; padding:7px 8px; border:0; border-radius:5px; background:#fff; text-align:left; }.order-product-result:hover,.order-product-result:focus-visible { background:#eef5ff; outline:0; }.order-product-result img { width:38px; height:48px; object-fit:cover; border:1px solid var(--line); border-radius:4px; background:#f5f7fa; }.order-product-result span { min-width:0; display:grid; gap:2px; }.order-product-result strong,.order-product-result small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.order-product-result strong { color:#1e4fa8; font-size:13px; }.order-product-result small { color:#687386; font-size:11px; }.order-product-result em { color:#687386; font-size:11px; font-style:normal; white-space:nowrap; }.order-product-empty { padding:12px; color:#687386; font-size:12px; text-align:center; }.order-product-hint { margin:0; color:var(--muted); font-size:12px; }.order-product-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:11px 12px; background:#f7f9fc; border:1px solid var(--line); border-radius:6px; color:#4f5e72; font-size:13px; }.order-product-summary span { min-width:0; }
.order-material-card,.order-lines-card { display:grid; gap:10px; padding:13px 14px; border:1px solid var(--line); border-radius:7px; background:#fbfcfe; }.order-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.order-section-head h3 { margin:0; font-size:14px; }.order-section-head p { margin:3px 0 0; color:var(--muted); font-size:12px; }.material-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; color:#536074; font-size:12px; }.material-grid b { color:var(--ink); font-weight:650; }.inline-warning { padding:8px 10px; color:#8d4311; background:#fff6e8; border:1px solid #f2d3a8; border-radius:5px; font-size:12px; }.inline-success { padding:8px 10px; color:#17663a; background:#edf9f1; border:1px solid #b9e3c7; border-radius:5px; font-size:12px; }.order-line-table { width:100%; min-width:560px; border-collapse:collapse; }.order-line-table th,.order-line-table td { padding:8px 9px; border-bottom:1px solid #e9edf3; text-align:left; font-size:12px; }.order-line-table th { color:#607087; font-weight:600; background:#f4f7fb; }.order-line-table tr:last-child td { border-bottom:0; }.order-line-quantity { width:110px; border:1px solid #cbd3df; border-radius:5px; padding:6px 8px; }.order-line-table code { color:#315fa9; font-size:11px; }.order-calc-note { padding:9px 11px; color:#4b5d75; background:#f3f7ff; border-left:3px solid #75a1ef; font-size:12px; }.order-calc-note strong { color:#1748ae; font-size:14px; }
.dialog { width:min(860px,calc(100% - 28px)); max-height:min(760px,calc(100% - 28px)); border:0; border-radius:8px; padding:0; box-shadow:0 18px 60px #19263b40; }.dialog::backdrop { background:#19223680; }.dialog-inner { background:#fff; }.dialog-head { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); }.dialog-head h2 { margin:0; font-size:18px; }.dialog-head .close { border:0; background:transparent; color:#687386; font-size:23px; width:32px; height:32px; padding:0; }.details { padding:20px; }.detail-top { display:grid; grid-template-columns:190px minmax(0,1fr); gap:18px; align-items:start; }.image-block { display:grid; gap:8px; width:190px; }.image-caption { display:flex; justify-content:center; }.image-upload { min-height:30px; font-size:12px; }.detail-image { width:190px; height:228px; object-fit:cover; object-position:center; background:#f2f3f7; border:1px solid var(--line); border-radius:6px; }.detail-title { margin:0; font-size:21px; }.detail-meta { margin:8px 0; color:var(--muted); }.detail-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; padding-top:2px; }.section-title { margin:22px 0 9px; color:#2a3548; font-size:14px; }.fields { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:6px; overflow:hidden; }.field { min-height:73px; padding:11px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.field:nth-child(3n) { border-right:0; }.field:nth-last-child(-n+3) { border-bottom:0; }.field label { display:block; color:var(--muted); font-size:12px; margin-bottom:5px; }.field strong { font-weight:600; }.field input,.field select,.field textarea { width:100%; border:1px solid #cbd3df; border-radius:4px; padding:6px 7px; outline-color:#8bb4ff; }.field textarea { height:54px; resize:vertical; }.timeline { margin:0; padding:0; list-style:none; }.timeline li { padding:8px 0 8px 16px; border-left:2px solid #dbe5f8; position:relative; }.timeline li::before { content:""; width:7px; height:7px; border-radius:50%; background:#4d80df; position:absolute; left:-4.5px; top:14px; }.timeline time { color:var(--muted); font-size:12px; margin-left:5px; }
.form { padding:20px; display:grid; gap:15px; }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.form label { display:grid; gap:6px; color:#405066; font-size:13px; }.form input,.form select,.form textarea { border:1px solid #cbd3df; border-radius:5px; padding:9px; color:var(--ink); background:#fff; }.form textarea { min-height:76px; resize:vertical; }.size-picker { display:flex; gap:7px; flex-wrap:wrap; }.size-picker label { display:flex; align-items:center; gap:5px; border:1px solid var(--line); padding:5px 8px; border-radius:5px; }.form-footer { display:flex; justify-content:flex-end; align-items:center; gap:8px; padding-top:4px; }.form-footer button { min-width:80px; white-space:nowrap; }
.image-field { align-content:start; }.image-drop { min-height:82px; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px dashed #aebbd0; border-radius:6px; background:#fafcff; cursor:pointer; outline:none; transition:border-color .15s ease,background .15s ease,box-shadow .15s ease; }.image-drop:hover,.image-drop:focus,.image-drop.drag-over { border-color:var(--blue); background:#eef5ff; box-shadow:0 0 0 3px #dce9ff; }.image-drop.has-image { border-style:solid; border-color:#6db586; background:#f2faf5; }.image-drop img { width:56px; height:56px; flex:0 0 56px; object-fit:contain; border-radius:4px; background:#fff; border:1px solid #dfe6e3; }.image-drop-icon { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:50%; background:#e8f0ff; color:#1d5bd1; font-size:20px; font-weight:700; }.image-drop.has-image .image-drop-icon { display:none; }.image-drop-copy { min-width:0; display:grid; gap:3px; }.image-drop-copy strong { color:#263247; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.image-drop-copy small { color:var(--muted); font-size:12px; }
.full-field { grid-column:1/-1; }.edit-product { margin-top:12px; }.details .fields + .edit-product { display:block; }
.detail-focus-section { margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }.detail-focus-section .section-title { margin-top:0; margin-bottom:4px; }.detail-fields-empty { padding:16px; border:1px dashed #d6dde8; border-radius:6px; color:var(--muted); background:#fbfcfe; font-size:13px; }.detail-more-fields { margin-top:10px; border:1px solid var(--line); border-radius:6px; background:#fbfcfe; overflow:hidden; }.detail-more-fields summary { padding:10px 12px; color:#44536b; font-size:13px; font-weight:650; cursor:pointer; list-style:none; }.detail-more-fields summary::-webkit-details-marker { display:none; }.detail-more-fields summary::after { content:"展开"; float:right; color:var(--blue); font-weight:600; }.detail-more-fields[open] summary::after { content:"收起"; }.detail-more-fields .fields { border:0; border-top:1px solid var(--line); border-radius:0; }.detail-compact-edit { display:block; margin-top:10px; }
.activity-panel { position:fixed; top:80px; right:0; width:340px; height:calc(100vh - 80px); background:#fff; border-left:1px solid var(--line); z-index:3; padding:18px; transform:translateX(100%); transition:transform .18s ease; box-shadow:-6px 0 22px #2637520d; overflow:auto; }.activity-panel.open { transform:translateX(0); }.activity-panel h2 { font-size:16px; margin:0 0 12px; }.activity-panel .feed { padding:0; }.activity-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }.activity-head h2 { margin:0; }.activity-panel .feed-item[data-open] { cursor:pointer; border-radius:5px; padding-left:7px; padding-right:7px; margin-left:-7px; margin-right:-7px; }.activity-panel .feed-item[data-open]:hover,.activity-panel .feed-item[data-open]:focus-visible { background:#f3f8f7; outline:0; }.activity-panel .feed-item.unread { background:#fffaf2; }.audit-table { min-width:760px; }.activity-record-id { color:#315fa9; font-size:11px; }.history-actions { display:flex; align-items:center; gap:8px; margin-top:9px; }.audit-toolbar { align-items:flex-end; }.audit-lookup { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }.audit-lookup input { min-width:220px; }
.activity-button { position:relative; }.activity-badge { position:absolute; top:-5px; right:-7px; min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center; border:2px solid #fff; border-radius:9px; color:#fff; background:#c2414f; font-size:10px; font-weight:750; line-height:1; }
.sku-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.sku-chip { display:grid; gap:3px; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:5px; background:#fafbfe; }.sku-chip strong { overflow-wrap:anywhere; font-size:13px; }.sku-chip small { color:var(--muted); }.activity-panel .activity-heading { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.work-attention-list { display:grid; gap:4px; margin-top:5px; }.work-attention { display:grid; gap:1px; padding:4px 6px; border-left:3px solid #c88a32; border-radius:3px; background:#fff8ed; line-height:1.35; }.work-attention strong { color:#8a5414; font-size:11px; }.work-attention small { color:#765f42; font-size:10px; white-space:normal; overflow-wrap:anywhere; }.work-attention-return { border-left-color:#c2414f; background:#fff3f4; }.work-attention-return strong { color:#9f2e3b; }.work-attention-task { border-left-color:#347e77; background:#eef8f5; }.work-attention-task strong { color:#17655d; }.pattern-requirement-preview { max-width:250px; white-space:normal; overflow-wrap:anywhere; }
.sku-section-heading { margin-top:22px; }.sku-section-heading .section-title { margin:0 0 4px; }.assortment-dialog { max-width:760px; }.assortment-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:12px; border:1px solid #e1e6ee; border-radius:7px; background:#f8faff; }.assortment-summary > div { display:grid; align-content:start; gap:5px; min-width:0; }.assortment-summary span,.assortment-summary small { color:var(--muted); font-size:12px; }.assortment-summary strong { color:#17243a; font-size:20px; }.assortment-chips { display:flex; flex-wrap:wrap; gap:4px; }.assortment-chips i { padding:3px 6px; border-radius:4px; color:#345277; background:#eaf2ff; font-size:11px; font-style:normal; }.assortment-size-picker { padding-top:3px; }.assortment-size { display:flex !important; align-items:center; gap:5px; padding:7px 9px !important; }.assortment-size.existing { color:#7c8797; background:#f4f6f9; }.assortment-size small { color:#8792a3; font-size:10px; }.assortment-preview { padding:10px 12px; border:1px solid #d6e3fa; border-radius:5px; color:#355579; background:#f3f7ff; font-size:12px; line-height:1.5; }.assortment-preview strong { color:#1c55b4; }
.create-assortment-preview { min-height:48px; display:flex; align-items:center; flex-wrap:wrap; gap:5px 7px; padding:8px 10px; border:1px solid #dce4f0; border-radius:5px; color:#718096; background:#f8faff; font-size:11px; line-height:1.4; }.create-assortment-preview .assortment-chips { display:contents; }.create-assortment-preview .assortment-chips i { padding:4px 7px; color:#254e86; background:#e9f1ff; }.create-assortment-preview .create-color-preview-label { color:#687386; }.create-assortment-preview strong { margin-left:auto; color:#1748ae; font-size:12px; white-space:nowrap; }.create-assortment-preview small { flex:0 0 100%; color:#7c8798; }
.dialog-head-actions { display:flex; align-items:center; gap:8px; }.product-history-trigger { white-space:nowrap; }.product-history-panel { padding:16px 20px; background:#f8f9fc; border-bottom:1px solid var(--line); max-height:360px; overflow:auto; }.history-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:10px; }.history-head h3 { margin:0; font-size:15px; }.history-head p { margin:3px 0 0; color:var(--muted); font-size:12px; }.history-feed { padding:0; }.history-feed li { background:#fff; padding:11px 12px; border:1px solid #e4e8ef; border-radius:6px; margin-bottom:8px; }.history-feed li:last-child { border-bottom:1px solid #e4e8ef; }.history-changes { display:grid; gap:5px; margin-top:8px; }.history-change { display:grid; grid-template-columns:90px minmax(0,1fr) 14px minmax(0,1fr); gap:6px; align-items:start; font-size:12px; }.history-change span { color:#526075; font-weight:600; }.history-change del { color:#9a3f49; text-decoration:none; background:#fff0f2; padding:2px 5px; border-radius:3px; overflow-wrap:anywhere; }.history-change b { color:#8a95a5; text-align:center; }.history-change ins { color:#16713b; text-decoration:none; background:#edf9f1; padding:2px 5px; border-radius:3px; overflow-wrap:anywhere; }.detail-image-drop { width:190px; min-height:0; padding:8px; display:grid; grid-template-columns:1fr; justify-items:center; gap:8px; }.detail-image-drop img { width:172px; height:210px; flex:0 0 auto; object-fit:cover; object-position:center; }.detail-image-drop .image-drop-copy { text-align:center; }.detail-image-drop .image-drop-copy strong { white-space:normal; line-height:1.35; }.detail-image-drop.uploading { opacity:.72; pointer-events:none; }
.image-preview-dialog { position:fixed; inset:0; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:transparent; overflow:hidden; }.image-preview-dialog[open] { display:grid; place-items:center; }.image-preview-dialog::backdrop { background:#0b111ddd; }.image-preview-stage { max-width:100vw; max-height:100dvh; padding:32px 56px 48px; display:grid; place-items:center; gap:10px; pointer-events:none; }.image-preview-stage img { display:block; width:auto; height:auto; max-width:calc(100vw - 112px); max-height:calc(100dvh - 104px); object-fit:contain; object-position:center; background:#111827; border-radius:4px; box-shadow:0 18px 64px #0009; }.image-preview-stage p { min-height:18px; margin:0; color:#eef2f8; font-size:13px; text-align:center; }.image-preview-close { position:fixed; top:18px; right:20px; z-index:2; width:42px; height:42px; padding:0; display:grid; place-items:center; border:1px solid #ffffff55; border-radius:50%; background:#111827cc; color:#fff; font-size:28px; line-height:1; }.image-preview-close:hover,.image-preview-close:focus-visible { background:#25324a; border-color:#fff; outline:2px solid #8db4ff; outline-offset:2px; }
@media (max-width:760px) { .dialog-head-actions { gap:3px; }.product-history-trigger { padding:0 8px; }.product-history-panel { padding:14px; }.history-change { grid-template-columns:74px 1fr; }.history-change b { display:none; }.history-change ins { grid-column:2; }.detail-top { grid-template-columns:112px 1fr; gap:12px; }.image-block,.detail-image-drop { width:112px; }.detail-image { width:112px; height:144px; }.detail-image-drop img { width:94px; height:122px; }.detail-image-drop .image-drop-copy small { display:none; } }
@media (max-width:760px) { .image-preview-stage { padding:62px 14px 44px; }.image-preview-stage img { max-width:calc(100vw - 28px); max-height:calc(100dvh - 116px); }.image-preview-close { top:12px; right:12px; } }
@media (max-width:1080px) { .metrics { grid-template-columns:repeat(3,1fr); }.content-grid,.two-columns,.dashboard-lower { grid-template-columns:1fr; }.attention-grid { grid-template-columns:repeat(4,1fr); }.attention-item:nth-child(4) { border-right:0; }.attention-item:nth-child(-n+4) { border-bottom:1px solid #edf0f4; }.work-cards { grid-template-columns:repeat(2,1fr); }.work-filter-controls { grid-template-columns:1fr 1fr; }.work-filter-date { grid-column:1/-1; }.work-filter-reset { justify-self:start; min-width:88px; } }
@media (max-width:760px) { .app-shell { display:block; }.sidebar { min-height:auto; height:auto; position:static; padding:10px; }.brand { padding:0; }.nav { display:flex; overflow:auto; margin-top:10px; }.nav-item { width:auto; white-space:nowrap; }.sidebar-footer { display:none; }.topbar { height:auto; min-height:72px; padding:12px 16px; align-items:flex-start; gap:12px; }.top-actions { flex-wrap:wrap; justify-content:flex-end; }.search { width:190px; }.page { padding:18px 16px 34px; }.dashboard-toolbar { align-items:flex-start; flex-wrap:wrap; }.dashboard-toolbar > div { width:100%; }.dashboard-updated { order:3; }.metrics { grid-template-columns:repeat(2,1fr); }.metric { min-height:96px; }.toolbar { align-items:flex-start; flex-direction:column; }.attention-grid { grid-template-columns:repeat(2,1fr); }.attention-item:nth-child(2n) { border-right:0; }.attention-item:nth-child(-n+6) { border-bottom:1px solid #edf0f4; }.risk-item { grid-template-columns:44px minmax(0,1fr); }.risk-owner { grid-column:2; text-align:left; }.empty-state.compact { grid-template-columns:1fr; }.work-cards { grid-template-columns:1fr; }.work-filter-title { display:grid; gap:3px; }.work-filter-controls { grid-template-columns:1fr; }.work-filter-date { grid-column:auto; }.date-range { grid-template-columns:1fr; }.date-range i { display:none; }.work-filter-reset { width:100%; }.work-filter-result { text-align:left; }.order-product-summary { grid-template-columns:1fr 1fr; }.material-grid { grid-template-columns:1fr 1fr; }.detail-top { grid-template-columns:112px 1fr; }.image-block,.detail-image-drop { width:112px; }.detail-image { width:112px; height:144px; }.detail-image-drop img { width:94px; height:122px; }.detail-actions { grid-column:1/-1; justify-content:flex-start; }.fields,.form-grid,.sku-grid { grid-template-columns:1fr; }.field { border-right:0; }.field:nth-last-child(-n+3) { border-bottom:1px solid var(--line); }.field:last-child { border-bottom:0; } }
@media (max-width:760px) { .styling-layout { grid-template-columns:1fr; }.styling-image-wrap,.styling-image { width:100%; }.match-picker { grid-template-columns:1fr; }.matching-product { grid-template-columns:44px auto; }.matching-product > span { grid-column:2; }.match-style-list { max-width:120px; } }

/* Executive dashboard sales layer: platform actuals and internal order estimates stay separate. */
.dashboard-kpi-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
.dashboard-kpi-card.sales { border-color:#b9d2ff; background:linear-gradient(145deg,#f7faff,#fff); }
.dashboard-kpi-card.sales > span { color:#315fa9; font-weight:650; }
.dashboard-kpi-card.sales > strong { color:#1858c7; font-size:27px; overflow-wrap:anywhere; }
.dashboard-sales-panel { margin-bottom:16px; }
.dashboard-sales-panel > .panel-head { min-height:62px; }
.dashboard-sales-panel > .panel-head > a { color:var(--blue); font-size:12px; cursor:pointer; white-space:nowrap; }
.dashboard-sales-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:14px 16px 12px; }
.dashboard-sales-card { min-width:0; display:grid; gap:5px; padding:13px 14px; border:1px solid #e1e7f0; border-radius:7px; background:#fbfcfe; }
.dashboard-sales-card.platform { border-color:#bfd5ff; background:#f7faff; }
.dashboard-sales-card.order { border-color:#dccaf5; background:#fbf9ff; }
.dashboard-sales-card > span { color:#667386; font-size:11px; }
.dashboard-sales-card > strong { color:#263247; font-size:23px; line-height:1.15; overflow-wrap:anywhere; }
.dashboard-sales-card.platform > strong { color:#1858c7; }
.dashboard-sales-card.order > strong { color:#7152c8; }
.dashboard-sales-card > small { min-height:30px; color:#7b8798; font-size:11px; line-height:1.45; }
.dashboard-sales-definition { margin:0; padding:0 16px 14px; color:#687386; font-size:11px; line-height:1.6; }
@media (max-width:1250px) {
  .dashboard-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dashboard-sales-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .dashboard-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-sales-grid { grid-template-columns:1fr; gap:8px; padding:12px; }
  .dashboard-sales-panel > .panel-head { align-items:flex-start; }
  .dashboard-sales-panel > .panel-head > a { margin-top:2px; }
}
@media (max-width:760px) {
  .permission-empty { align-items:flex-start; flex-direction:column; min-height:220px; padding:28px 22px; }
}

/* Employee picker: replace the platform-native select sheet with a compact,
   searchable surface that keeps name, number and team visually separated. */
.hr-employee-field { min-width:0; position:relative; display:grid; gap:6px; }
.hr-employee-field > label { display:block; color:#405b58; font-size:13px; }
.hr-employee-picker { position:relative; min-width:0; }
.hr-employee-trigger-wrap { display:flex; align-items:stretch; gap:6px; min-width:0; }
.hr-employee-trigger { min-width:0; flex:1 1 auto; min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 11px; border:1px solid #cfdedb; border-radius:10px; color:var(--ink); background:#fff; text-align:left; transition:border-color .15s ease,box-shadow .15s ease,background .15s ease; }
.hr-employee-trigger:hover { border-color:#8dbeb6; background:#fbfefd; }
.hr-employee-trigger:focus-visible,.hr-employee-picker.is-open .hr-employee-trigger { border-color:#5b9f97; outline:0; box-shadow:0 0 0 3px #e4f2ef; }
.hr-employee-trigger-copy { min-width:0; display:grid; gap:3px; }
.hr-employee-trigger-copy strong { overflow:hidden; color:#244742; font-size:13px; font-weight:720; text-overflow:ellipsis; white-space:nowrap; }
.hr-employee-trigger-copy small { overflow:hidden; color:#82928f; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.hr-employee-trigger.has-value .hr-employee-trigger-copy small { color:#5f7d77; }
.hr-employee-trigger-icon { flex:0 0 auto; color:#6a8c86; font-size:18px; line-height:1; transform:translateY(-1px); transition:transform .15s ease; }
.hr-employee-picker.is-open .hr-employee-trigger-icon { transform:rotate(180deg) translateY(1px); }
.hr-employee-clear,.hr-employee-search-clear { flex:0 0 auto; width:34px; min-height:34px; align-self:center; padding:0; border:1px solid #d9e6e3; border-radius:9px; color:#76908b; background:#f7fbfa; font-size:18px; line-height:1; }
.hr-employee-clear:hover,.hr-employee-search-clear:hover { color:#b23e4e; border-color:#efc6cc; background:#fff5f6; }
.hr-employee-popover { position:fixed; z-index:100; display:grid; gap:8px; min-width:260px; padding:10px; border:1px solid #c9ded9; border-radius:12px; background:#fff; box-shadow:0 18px 38px rgba(23,67,62,.16); }
.hr-employee-search { display:flex; align-items:center; gap:7px; min-height:38px; padding:0 8px; border:1px solid #d4e4e0; border-radius:9px; background:#f8fcfb; color:#77918b; }
.hr-employee-search:focus-within { border-color:#6eafa6; box-shadow:0 0 0 3px #e5f3f0; background:#fff; }
.hr-employee-search > span { flex:0 0 auto; font-size:18px; line-height:1; }
.hr-employee-search input { min-width:0; flex:1; height:34px; padding:0; border:0; outline:0; color:var(--ink); background:transparent; }
.hr-employee-search input::placeholder { color:#9aaba7; }
.hr-employee-options { display:grid; gap:4px; max-height:min(260px,38vh); overflow-y:auto; overscroll-behavior:contain; padding:1px; }
.hr-employee-option { width:100%; min-width:0; display:grid; grid-template-columns:32px minmax(0,1fr) 18px; align-items:center; gap:9px; min-height:52px; padding:7px 8px; border:1px solid transparent; border-radius:9px; color:var(--ink); background:#fff; text-align:left; }
.hr-employee-option:hover,.hr-employee-option.is-active { border-color:#cce5df; background:#f2faf8; }
.hr-employee-option.is-selected { border-color:#9fcfc5; background:#eaf6f3; }
.hr-employee-avatar { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#17645c; background:#dff1ed; font-size:13px; font-weight:750; }
.hr-employee-option-copy { min-width:0; display:grid; gap:3px; }
.hr-employee-option-copy strong { overflow:hidden; color:#244742; font-size:13px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.hr-employee-option-copy small { overflow:hidden; color:#738883; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.hr-employee-option-check { visibility:hidden; color:#13806f; font-size:15px; font-weight:800; text-align:center; }
.hr-employee-option.is-selected .hr-employee-option-check { visibility:visible; }
.hr-employee-options-empty { padding:15px 10px; color:#879894; font-size:12px; text-align:center; }
.hr-employee-picker-hint { color:#8a9a97; font-size:10px; line-height:1.4; }
.hr-employee-field.has-validation-error .hr-employee-trigger { border-color:#d8717d; box-shadow:0 0 0 3px #fff0f2; }
@media (max-width:760px) {
  .hr-employee-trigger { min-height:50px; }
  .hr-employee-popover { min-width:0; max-height:min(430px,calc(100dvh - 28px)); padding:11px; box-shadow:0 20px 50px rgba(23,67,62,.24); }
  .hr-employee-options { max-height:min(290px,42dvh); }
}

/* HR payslip identity: keep the name readable and the generated number
   visually separate without adding a second tall line on narrow screens. */
.hr-payslip-employee-cell { min-width:150px; }
.hr-payslip-employee { display:inline-flex; align-items:baseline; gap:8px; min-width:0; white-space:nowrap; }
.hr-payslip-employee strong { color:#173b37; font-size:13px; font-weight:740; }
.hr-payslip-employee small { display:inline-flex; align-items:center; min-height:21px; padding:0 7px; border:1px solid #d6e8e3; border-radius:999px; color:#64817b; background:#f1f8f6; font-size:11px; line-height:1; }
@media (max-width:760px) {
  .hr-payslip-employee-cell { min-width:138px; }
  .hr-payslip-employee { gap:6px; }
  .hr-payslip-employee small { padding:0 6px; }
}

/* Management cockpit: structure, contribution and execution at a glance */
.dashboard-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin:-3px 0 18px; padding:4px 0 17px; border-bottom:1px solid var(--line); }.dashboard-kicker { color:#315fa9; font-size:12px; font-weight:700; letter-spacing:.04em; }.dashboard-hero h2 { margin:2px 0 3px; font-size:25px; letter-spacing:0; }.dashboard-hero p { margin:0; color:var(--muted); font-size:13px; }.dashboard-hero-controls { display:flex; align-items:flex-end; gap:14px; }.dashboard-hero-controls label { display:grid; gap:5px; color:#536074; font-size:12px; }.dashboard-hero-controls select { min-width:148px; min-height:36px; padding:0 10px; border:1px solid #cbd3df; border-radius:6px; background:#fff; color:var(--ink); }.dashboard-hero-controls .dashboard-updated { padding-bottom:9px; white-space:nowrap; }
.dashboard-kpi-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:16px; }.dashboard-kpi-card { min-width:0; min-height:120px; display:grid; align-content:start; gap:3px; padding:15px 16px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 1px 0 #1f30420a; }.dashboard-kpi-card > span { color:#687386; font-size:12px; }.dashboard-kpi-card > strong { margin-top:5px; color:#172033; font-size:30px; line-height:1.1; }.dashboard-kpi-card > small { color:#7c8798; font-size:11px; line-height:1.45; }.dashboard-kpi-card.green > strong { color:#168346; }.dashboard-kpi-card.blue > strong { color:#2463eb; }.dashboard-kpi-card.violet > strong { color:#7152c8; }.dashboard-kpi-card.alert { border-color:#f0c6cb; background:#fffafb; }.dashboard-kpi-card.alert > strong { color:#c63748; }
.dashboard-intelligence { margin-bottom:16px; border:1px solid #d9e4f3; border-radius:8px; background:linear-gradient(135deg,#f7fbff,#fff); overflow:hidden; }.dashboard-intelligence .panel-head { min-height:64px; padding:14px 16px; }.dashboard-intelligence-badge { padding:4px 8px; border-radius:12px; color:#176b62; background:#e5f5f1; font-size:10px; white-space:nowrap; }.dashboard-intelligence-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:0 14px 14px; }.dashboard-intelligence-card { min-width:0; display:grid; align-content:start; gap:8px; padding:12px; border:1px solid #e1e8f2; border-radius:7px; background:#fff; }.dashboard-intelligence-card.urgent { border-color:#f1c4c9; background:#fff9fa; }.dashboard-intelligence-card.focus { border-color:#ecd6ae; background:#fffdf8; }.dashboard-intelligence-card.time { border-color:#cbdcf6; background:#f9fbff; }.dashboard-intelligence-card.progress { border-color:#cce6dd; background:#f8fcfa; }.dashboard-intelligence-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }.dashboard-intelligence-card-head span { color:#67758a; font-size:11px; }.dashboard-intelligence-card-head strong { color:#25334a; font-size:20px; line-height:1.1; }.dashboard-intelligence-card.urgent .dashboard-intelligence-card-head strong { color:#b42336; }.dashboard-intelligence-card p { min-height:34px; margin:0; overflow-wrap:anywhere; color:#526075; font-size:11px; line-height:1.5; }.dashboard-intelligence-card .compact-button { justify-self:start; min-height:28px; padding:0 9px; }
.dashboard-overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:16px; }.dashboard-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:16px; }.dashboard-chart-panel { min-width:0; min-height:255px; }.dashboard-chart-panel .panel-head { min-height:70px; }.dashboard-distribution-list { display:grid; gap:14px; padding:17px 16px 19px; }.dashboard-distribution-row { display:grid; gap:6px; }.dashboard-distribution-label { display:flex; justify-content:space-between; align-items:baseline; gap:10px; min-width:0; }.dashboard-distribution-label strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#263247; font-size:13px; }.dashboard-distribution-label span { flex:0 0 auto; color:#7b8798; font-size:11px; }.dashboard-bar { height:8px; overflow:hidden; border-radius:4px; background:#edf1f6; }.dashboard-bar i { display:block; height:100%; min-width:0; border-radius:4px; background:#4d80df; }.dashboard-chart-panel:nth-child(2) .dashboard-bar i { background:#7a66c7; }.dashboard-detail-grid .dashboard-chart-panel:nth-child(1) .dashboard-bar i { background:#4d9d7a; }.dashboard-detail-grid .dashboard-chart-panel:nth-child(2) .dashboard-bar i { background:#d28a3d; }.dashboard-chart-empty { min-height:175px; display:grid; place-items:center; padding:18px; color:#8792a3; font-size:12px; }.dashboard-influencer-grid { display:grid; gap:11px; padding:14px 16px 18px; }.dashboard-influencer-card { display:grid; gap:7px; padding:11px 12px; border:1px solid #e6eaf1; border-radius:6px; background:#fbfcfe; }.dashboard-influencer-head { display:flex; align-items:start; justify-content:space-between; gap:10px; }.dashboard-influencer-head div { display:grid; gap:2px; min-width:0; }.dashboard-influencer-head strong { color:#263247; font-size:13px; }.dashboard-influencer-head small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#7b8798; font-size:11px; }.dashboard-influencer-head b { color:#2463eb; font-size:20px; line-height:1; }.dashboard-influencer-card > span { color:#7b8798; font-size:11px; }.dashboard-influencer-card .dashboard-bar i { background:#2d72e8; }
.dashboard-attention-panel { min-height:255px; }.dashboard-attention-panel .panel-head { min-height:70px; }.dashboard-attention-panel .attention-grid { height:calc(100% - 70px); grid-template-columns:repeat(2,1fr); align-content:stretch; }.dashboard-attention-panel .attention-item { min-height:75px; }.dashboard-attention-panel .attention-item:nth-child(2n) { border-right:0; }.dashboard-attention-panel .attention-item:nth-child(-n+6) { border-bottom:1px solid #edf0f4; }.dashboard-modules { margin-bottom:16px; overflow:visible; }.dashboard-modules > .panel-head { min-width:0; }.dashboard-module-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:15px; }.dashboard-module-card { min-width:0; display:grid; gap:10px; padding:13px; border:1px solid #e2e6ee; border-radius:7px; background:#fbfcfe; }.dashboard-module-card-head { display:flex; align-items:start; justify-content:space-between; gap:12px; }.dashboard-module-card-head > strong { color:#263247; font-size:20px; line-height:1; }.dashboard-module-progress .module-progress-bar { height:9px; }.dashboard-module-stats { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; color:#7c8798; font-size:11px; }.dashboard-module-stats b { color:#344158; font-size:13px; }.dashboard-module-stats .done-count b { color:var(--green); }.dashboard-module-stats .doing-count b { color:var(--orange); }.dashboard-module-stats .risk-count { margin-left:auto; min-height:24px; padding:0 7px; font-size:10px; }.dashboard-module-stats .risk-count.has-risk { color:var(--red); }
@media (max-width:1250px) { .dashboard-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.dashboard-overview-grid,.dashboard-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-influencer-panel { grid-column:1/-1; }.dashboard-module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-intelligence-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .dashboard-hero { align-items:flex-start; flex-direction:column; gap:12px; }.dashboard-hero h2 { font-size:22px; }.dashboard-hero-controls { width:100%; align-items:flex-start; justify-content:space-between; }.dashboard-hero-controls .dashboard-updated { padding-bottom:9px; }.dashboard-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.dashboard-kpi-card { min-height:102px; padding:12px; }.dashboard-kpi-card > strong { font-size:25px; }.dashboard-overview-grid,.dashboard-detail-grid,.dashboard-module-grid { grid-template-columns:1fr; gap:12px; }.dashboard-influencer-panel { grid-column:auto; }.dashboard-chart-panel { min-height:0; }.dashboard-attention-panel .attention-grid { height:auto; }.dashboard-module-grid { padding:12px; }.dashboard-module-card { padding:12px; }.dashboard-intelligence-grid { grid-template-columns:1fr; }.dashboard-hero-controls select { min-width:132px; } }
.business-timeline { display:grid; }.business-milestone { width:100%; display:grid; grid-template-columns:86px minmax(0,1fr) 44px; gap:10px; align-items:center; min-height:58px; padding:9px 16px; border:0; border-bottom:1px solid #eef0f4; background:#fff; text-align:left; }.business-milestone:last-child { border-bottom:0; }.business-milestone:hover { background:#fbfcff; }.business-milestone-date,.business-milestone-copy { min-width:0; display:grid; gap:2px; }.business-milestone-date strong { color:#263247; font-size:13px; }.business-milestone-date small,.business-milestone-copy small { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.business-milestone-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.business-milestone-status { justify-self:end; padding:3px 5px; border-radius:4px; color:#6f7b8d; background:#f0f3f7; font-size:10px; white-space:nowrap; }.business-milestone.overdue .business-milestone-date strong,.business-milestone.overdue .business-milestone-status { color:#ae2637; }.business-milestone.overdue .business-milestone-status { background:#ffeaed; }.business-milestone.today .business-milestone-date strong,.business-milestone.today .business-milestone-status { color:#b45b0b; }.business-milestone.today .business-milestone-status,.business-milestone.soon .business-milestone-status { background:#fff1df; }
/* Required-field guidance and submit-time validation */
.required-legend { margin:-5px 0 -2px; color:#687386; font-size:12px; line-height:1.5; }
.required-symbol,.required-field::after { color:#c73446; font-weight:750; }
.required-field { position:relative; }
.required-field::after { content:"*"; position:absolute; top:0; left:-9px; font-size:15px; line-height:1; }
.form-validation-summary { padding:9px 11px; border:1px solid #f0b8c0; border-radius:5px; color:#a42336; background:#fff4f5; font-size:12px; line-height:1.5; }
.form-validation-summary[hidden] { display:none; }
.has-validation-error > input,.has-validation-error > select,.has-validation-error > textarea,
.has-validation-error .order-product-search,.has-validation-error .size-picker { border-color:#c73446 !important; box-shadow:0 0 0 3px #fbe1e4; }
.has-validation-error .size-picker { border-radius:5px; padding:5px; }
.field-error { display:block; grid-column:1/-1; color:#b42336; font-size:12px; line-height:1.4; }
.required-field.has-validation-error { color:#a42336; }
.order-lines-card.required-field::after { top:13px; left:auto; right:14px; }
.order-lines-card.has-validation-error { border-color:#c73446; box-shadow:0 0 0 3px #fbe1e4; }
@media (max-width:760px) { .required-field::after { left:-7px; } }
@media (max-width:760px) { .auth-workspace #page { min-height:100dvh; padding:16px; align-items:start; }.auth-shell { width:100%; min-height:calc(100dvh - 32px); grid-template-columns:1fr; }.auth-brand-panel { min-height:190px; padding:24px 24px 22px; border-left:0; border-top:5px solid #b4232f; }.auth-brand-mark { width:40px; height:40px; margin-bottom:18px; font-size:19px; }.auth-company { margin-bottom:4px; font-size:14px; }.auth-brand-panel h1 { font-size:23px; }.auth-brand-note { margin-top:8px; }.auth-brand-footer { display:none; }.auth-panel { padding:30px 24px 24px; }.auth-kicker { margin-bottom:20px; }.auth-panel h2 { font-size:24px; }.auth-intro { margin-bottom:22px; }.auth-copyright { padding-top:24px; } }
.dialog { overflow:hidden; max-height:min(760px,calc(100dvh - 28px)); }
.dialog-inner { max-height:inherit; overflow:auto; }
.order-product-results { max-height:min(330px,42vh); }
.role-panel { margin-bottom:16px; }.role-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:16px; }.role-card { min-width:0; padding:16px; border:1px solid #e0e5ed; border-radius:7px; background:#fff; display:grid; gap:12px; }.role-card-admin { border-color:#c7d8ff; background:#f8fbff; }.role-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }.role-card-head h3 { margin:0 0 4px; font-size:16px; }.role-card-head span { color:var(--muted); font-size:12px; }.role-card-badges { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:flex-start; gap:5px; flex:0 0 auto; max-width:52%; }.role-permission-count { flex:0 0 auto; padding:4px 8px; border-radius:12px; background:#eaf2ff; color:#1748ae !important; font-weight:650; white-space:nowrap; }.role-mapping-count { display:inline-flex; align-items:center; min-height:20px; padding:2px 7px; border:1px solid #dfe5ee; border-radius:999px; color:#6c7788 !important; background:#f8fafc; font-size:10px !important; white-space:nowrap; }.role-mapping-count.has-references { border-color:#c9dafc; color:#265ab9 !important; background:#f0f5ff; }.role-card p { min-height:38px; margin:0; color:#627086; font-size:12px; line-height:1.6; }.role-capability { padding:8px 10px; border:1px solid #e5eaf2; border-radius:5px; background:#f8fafc; color:#53627a; font-size:12px; }.role-capability strong { color:#263b61; }.role-card-foot { min-height:25px; display:flex; align-items:center; gap:12px; border-top:1px solid #edf0f4; padding-top:10px; }.role-protected { color:#6a7688; font-size:11px; }.role-dialog { max-height:min(850px,calc(100vh - 28px)); overflow:auto; }.permission-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:4px; }.permission-toolbar > div { display:flex; gap:7px; }.permission-groups { display:grid; gap:12px; }.permission-group { border:1px solid #e1e6ee; border-radius:7px; background:#fbfcfe; overflow:hidden; }.permission-group-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:12px 14px; border-bottom:1px solid #e8ebf1; background:#f4f7fb; }.permission-group-head h4 { margin:0 0 3px; color:#263247; font-size:14px; }.permission-group-head span { color:var(--muted); font-size:11px; }.permission-select-all { display:flex !important; align-items:center; gap:5px; white-space:nowrap; color:#1748ae !important; font-size:12px !important; }.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; }.permission-option { display:flex !important; align-items:flex-start; gap:8px; min-width:0; padding:9px 10px; border:1px solid #e2e7ef; border-radius:5px; background:#fff; cursor:pointer; }.permission-option:has(input:checked) { border-color:#9abbff; background:#f1f6ff; }.permission-option input { margin-top:3px; flex:0 0 auto; }.permission-option span { min-width:0; display:grid; gap:3px; }.permission-option strong { color:#344158; font-size:12px; }.permission-option small { color:var(--muted); font-size:11px; line-height:1.45; }.account-table .row-actions { min-width:170px; }.account-table .subtle { display:block; }
.account-sync-state { margin:0 0 16px; min-height:42px; display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid #d8e4fb; border-radius:6px; background:#f5f8ff; color:#52627b; font-size:12px; }.account-sync-state strong { color:#b4232f; }.account-sync-state button { margin-left:auto; flex:0 0 auto; }.account-sync-ok { border-color:#d9eadd; background:#f6fbf7; color:#287344; }.account-sync-error { border-color:#f2c7cc; background:#fff7f8; color:#7b3c43; }.loading-dot { width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:#2463eb; box-shadow:0 0 0 4px #dce8ff; animation:account-sync-pulse 1.2s ease-in-out infinite; } @keyframes account-sync-pulse { 0%,100% { opacity:.45; transform:scale(.85); } 50% { opacity:1; transform:scale(1); } }
@media (max-width:1080px) { .role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .role-grid,.permission-grid { grid-template-columns:1fr; padding:12px; }.permission-group-head { display:grid; }.permission-toolbar { align-items:flex-start; flex-direction:column; }.account-table .row-actions { min-width:130px; } }
@media (max-width:760px) { .hr-account-provisioning-head,.hr-role-mapping-head { display:grid; }.hr-role-mapping-row { grid-template-columns:1fr; } }
/* Product color and assortment presentation */
.match-style-list { display:flex; flex-wrap:wrap; gap:4px 7px; max-width:180px; }.match-style-link { border:0; background:transparent; padding:0; color:var(--blue); font-size:12px; font-weight:650; cursor:pointer; }.match-style-link:hover { text-decoration:underline; }.styling-section { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.section-heading .section-title { margin-top:0; margin-bottom:4px; }.styling-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:16px; align-items:start; }.styling-image-wrap { min-height:130px; display:grid; place-items:center; border:1px solid var(--line); border-radius:6px; background:#fafbfe; overflow:hidden; }.styling-image { display:block; width:190px; height:150px; object-fit:contain; background:#fff; }.styling-image-empty { display:grid; gap:5px; padding:16px; text-align:center; color:#536074; font-size:12px; }.styling-image-empty span { color:var(--muted); }.matching-list { display:grid; gap:8px; }.matching-product { display:grid; grid-template-columns:44px auto minmax(0,1fr); align-items:center; gap:8px; min-height:44px; padding:6px 8px; border-bottom:1px solid #edf0f4; }.matching-product:last-child { border-bottom:0; }.matching-product-image { width:44px; height:52px; object-fit:cover; border:1px solid var(--line); border-radius:4px; }.matching-product > span { color:var(--muted); font-size:12px; }.styling-dialog { max-height:min(850px,calc(100vh - 28px)); overflow:auto; }.match-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:310px; overflow:auto; padding:2px; }.match-option { display:grid !important; grid-template-columns:auto 42px minmax(0,1fr); align-items:center; gap:7px; min-width:0; padding:7px; border:1px solid #e1e6ee; border-radius:5px; background:#fff; cursor:pointer; }.match-option:has(input:checked) { border-color:#9abbff; background:#f1f6ff; }.match-option input { margin:0; }.match-option span { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:6px; min-width:0; }.match-option strong,.match-option small { grid-column:2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.match-option small { color:var(--muted); font-size:11px; }.match-option-image { grid-row:1 / span 2; width:42px; height:50px; object-fit:cover; border:1px solid var(--line); border-radius:3px; }
/* Pattern responsibility, revision notes and return-to-design workflow */
.revision-opinions-section { display:grid; gap:9px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }.revision-opinions-section > .section-heading { margin-bottom:2px; }.revision-opinions-section > .section-heading > strong { padding:4px 8px; border-radius:12px; color:#1748ae; background:#eaf2ff; font-size:11px; }.pending-opinion-badge, .revision-alert-badge { display:inline-flex; align-items:center; gap:4px; color:#a33d09 !important; background:#fff0e6 !important; border:1px solid #f4b184; font-weight:700; }.revision-alert-badge { width:max-content; padding:2px 6px; border-radius:10px; font-size:11px; }.revision-opinion-item { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:10px 12px; border:1px solid #e4e8ef; border-radius:6px; background:#fbfcfe; }.revision-opinion-item.unread { border-color:#f4b184; background:#fffaf5; box-shadow:inset 3px 0 #ef7d28; }.revision-opinion-item > div { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; }.revision-opinion-item strong { color:#1748ae; white-space:nowrap; }.revision-opinion-item span { color:#354257; white-space:pre-wrap; }.revision-opinion-item small { flex:0 0 auto; color:var(--muted); white-space:nowrap; }.return-notice { display:grid; gap:3px; padding:10px 12px; border-left:3px solid var(--red); color:#8e2936; background:#fff5f6; }.return-notice span { color:#5f4650; }.revision-history-preview { display:grid; gap:7px; max-height:210px; overflow:auto; padding:10px; border:1px solid #e2e7ef; border-radius:6px; background:#f8faff; }.revision-history-preview > div { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:9px; padding-bottom:7px; border-bottom:1px solid #e3e8f0; }.revision-history-preview > div:last-child { padding-bottom:0; border-bottom:0; }.revision-history-preview strong { color:#1748ae; }.revision-history-preview span { white-space:pre-wrap; }.revision-history-preview small { color:var(--muted); white-space:nowrap; }
@media (max-width:760px) { .revision-opinion-item { display:grid; }.revision-opinion-item small { white-space:normal; }.revision-history-preview > div { grid-template-columns:auto minmax(0,1fr); }.revision-history-preview small { grid-column:2; white-space:normal; } }

/* Operational data center: targets stay separate from connector actuals. */
.operation-data-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:-3px 0 16px; padding:4px 0 17px; border-bottom:1px solid var(--line); }.operation-data-hero h2 { margin:3px 0 5px; font-size:25px; }.operation-data-hero p { margin:0; color:var(--muted); font-size:13px; }.operation-data-hero-actions { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }.operation-data-hero-actions label { display:grid; gap:5px; color:#536074; font-size:12px; }.operation-data-hero-actions input { min-height:36px; padding:0 10px; border:1px solid #cbd3df; border-radius:6px; background:#fff; color:var(--ink); }.operation-data-filters { display:grid; gap:12px; margin-bottom:16px; padding:14px 16px; }.operation-data-filter-group { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }.operation-data-filter-group > strong { min-width:40px; color:#344158; font-size:13px; }.operation-data-filter-group .filters { display:flex; flex-wrap:wrap; gap:7px; }.operation-data-all-months { margin-left:auto; border:0; background:transparent; color:#2463eb; font-size:12px; cursor:pointer; }.operation-data-all-months.selected { font-weight:700; }.operation-data-kpis { grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom:16px; }.operation-data-dashboard-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:16px; margin-bottom:16px; }.operation-data-bars { display:grid; gap:19px; padding:19px 18px 22px; }.operation-data-bar-row { display:grid; gap:7px; }.operation-data-bar-label { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }.operation-data-bar-label strong { color:#263247; font-size:13px; }.operation-data-bar-label span,.operation-data-bar-row small { color:var(--muted); font-size:11px; }.operation-data-bar { height:10px; overflow:hidden; border-radius:5px; background:#edf1f6; }.operation-data-bar i { display:block; height:100%; border-radius:5px; background:#2d72e8; }.operation-data-bar-row:nth-child(2) .operation-data-bar i { background:#8a63c7; }.operation-data-bar-row:nth-child(3) .operation-data-bar i { background:#dc8b45; }.operation-data-bar-row:nth-child(4) .operation-data-bar i { background:#29916a; }.operation-data-influencer-summary { display:grid; gap:10px; padding:18px; }.operation-data-influencer-summary > div { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:12px; border:1px solid #e4e8ef; border-radius:6px; background:#fbfcfe; }.operation-data-influencer-summary span { color:var(--muted); font-size:11px; }.operation-data-influencer-summary b { color:#2463eb; font-size:18px; }.operation-data-table-panel { margin-bottom:16px; }.operation-data-table th,.operation-data-table td { white-space:nowrap; }.operation-data-status { display:inline-flex; align-items:center; min-height:22px; padding:0 7px; border-radius:11px; color:#a86713; background:#fff2dc; font-size:11px; }.operation-data-status.connected { color:#157747; background:#e3f5ea; }.operation-data-connectors { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:16px; }.operation-connector-card { display:grid; gap:8px; min-height:112px; padding:13px; border:1px solid #e1e6ee; border-radius:7px; background:#fbfcfe; }.operation-connector-card > div { display:flex; justify-content:space-between; align-items:center; gap:8px; }.operation-connector-card strong { color:#263247; font-size:14px; }.operation-connector-card p,.operation-connector-card small { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }.operation-data-note { margin:0; padding:0 16px 16px; color:#687386; font-size:12px; line-height:1.6; }.operation-data-empty { display:grid; place-items:center; min-height:100px; padding:18px; color:#8792a3; font-size:12px; text-align:center; }.operation-goal-dialog { min-width:min(620px,calc(100vw - 30px)); }.dialog-help { margin:0 0 16px; color:var(--muted); font-size:12px; line-height:1.6; }
@media (max-width:1250px) { .operation-data-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }.operation-data-connectors { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .operation-data-hero { align-items:flex-start; flex-direction:column; gap:12px; }.operation-data-hero h2 { font-size:22px; }.operation-data-hero-actions { width:100%; align-items:flex-start; }.operation-data-hero-actions label { flex:1; }.operation-data-dashboard-grid { grid-template-columns:1fr; }.operation-data-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.operation-data-connectors { grid-template-columns:1fr; }.operation-data-filter-group { align-items:flex-start; flex-direction:column; gap:7px; }.operation-data-all-months { margin-left:0; }.operation-data-table { min-width:870px; } }

/* Influencer outfit workbench and protected virtual try-on references. */
.section-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.styling-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.styling-flow section { display:grid; grid-template-columns:26px minmax(0,1fr); column-gap:8px; align-items:center; min-height:54px; padding:8px 10px; border:1px solid #e0e6ef; border-radius:6px; background:#f8faff; }
.styling-flow section > span { grid-row:1 / span 2; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:#fff; background:#98a5b8; font-size:12px; font-weight:700; }
.styling-flow section strong { color:#344158; font-size:12px; }.styling-flow section small { color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.styling-flow section.ready { border-color:#a8ddc2; background:#f3fbf6; }.styling-flow section.ready > span { background:#20895b; }.styling-flow section.waiting { border-color:#f2d4a5; background:#fffaf1; }.styling-flow section.waiting > span { background:#c88325; }
.styling-editor-section { display:grid; gap:11px; margin-top:14px; padding:14px; border:1px solid #e1e6ee; border-radius:7px; background:#fff; }.styling-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.styling-section-head h3 { margin:0 0 4px; color:#263247; font-size:15px; }.styling-section-head p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }.styling-section-head > strong { flex:0 0 auto; padding:4px 8px; border-radius:12px; color:#1748ae; background:#eaf2ff; font-size:11px; white-space:nowrap; }.compact-search { margin:0 !important; }.compact-search input { min-height:34px; }
.model-profile-status { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #e2e7ef; border-radius:6px; background:#fbfcfe; }.model-profile-status.ready { border-color:#a8ddc2; background:#f3fbf6; }.model-profile-status.waiting { border-color:#f2d4a5; background:#fffaf1; }.model-profile-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#fff; background:#5676bd; font-size:15px; font-weight:700; }.model-profile-status > div { min-width:0; display:grid; gap:3px; }.model-profile-status strong { color:#344158; font-size:12px; }.model-profile-status small { color:var(--muted); font-size:11px; }.model-profile-status > b { margin-left:auto; color:#c07a20; font-size:11px; white-space:nowrap; }.model-profile-status.ready > b { color:#20895b; }
.styling-output-section { background:#fbfcff; }.styling-output-grid { display:grid; grid-template-columns:minmax(220px, .9fr) minmax(0,1.1fr); gap:14px; align-items:start; }.styling-output-preview { display:grid; place-items:center; min-height:230px; overflow:hidden; border:1px dashed #b8c6dc; border-radius:6px; background:#f4f7fb; text-align:center; }.styling-output-preview > div { display:grid; gap:5px; padding:20px; }.styling-output-preview strong { color:#536074; font-size:13px; }.styling-output-preview small { color:var(--muted); font-size:11px; }.styling-output-preview img { display:block; width:100%; height:320px; object-fit:contain; background:#fff; cursor:zoom-in; }.styling-output-preview > span { align-self:end; margin-top:-28px; padding:3px 7px; border-radius:4px; color:#fff; background:#263247cc; font-size:10px; pointer-events:none; }.effect-status { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:12px; color:#667386; background:#eef2f7; font-size:11px; white-space:nowrap; }.effect-status.ready { color:#157747; background:#e3f5ea; }.effect-status.failed { color:#a42336; background:#ffeaed; }.effect-error { display:block; color:#a42336; font-size:11px; line-height:1.5; }.manual-styling-upload { padding-top:2px; }.manual-styling-upload summary { color:#2463eb; cursor:pointer; font-size:12px; }.model-profile-dialog { max-width:760px; }.privacy-notice { display:grid; gap:4px; padding:11px 13px; border-left:3px solid #2d72e8; color:#344158; background:#eef5ff; font-size:12px; line-height:1.5; }.privacy-notice span { color:#5c6b80; font-size:11px; }.model-reference-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.model-reference-slot { display:grid; grid-template-columns:82px minmax(0,1fr); align-items:center; gap:10px; padding:10px; border:1px dashed #b8c6dc; border-radius:6px; background:#fbfcff; cursor:pointer; }.model-reference-slot:hover,.model-reference-slot:focus-visible { border-color:#5184ee; background:#f3f7ff; }.model-reference-image { display:grid; place-items:center; width:82px; height:100px; overflow:hidden; border-radius:4px; background:#edf1f6; }.model-reference-image img { width:100%; height:100%; object-fit:cover; }.model-reference-image span { color:#8792a3; font-size:11px; }.model-reference-slot > div:last-of-type { display:grid; gap:5px; }.model-reference-slot strong { color:#344158; font-size:12px; }.model-reference-slot small { color:var(--muted); font-size:11px; line-height:1.4; }.consent-check { display:flex !important; align-items:flex-start; gap:8px; padding:10px 12px; border:1px solid #e2e7ef; border-radius:6px; background:#fbfcfe; }.consent-check input { margin-top:3px; }.consent-check span { display:grid; gap:3px; }.consent-check strong { color:#344158; font-size:12px; }.consent-check small { color:var(--muted); font-size:11px; }
.provider-notice { display:grid; gap:3px; padding:10px 12px; border-left:3px solid #d38b28; color:#7a511d; background:#fff8ed; font-size:12px; line-height:1.5; }.provider-notice span { color:#6f604d; font-size:11px; }
.contract-detail-section { display:grid; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }.contract-detail-section .section-heading { margin-bottom:0; }.contract-actions { display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; }.contract-summary { display:inline-grid; gap:2px; min-width:150px; padding:6px 8px; border:1px solid #eadfb9; border-radius:6px; background:#fffaf0; }.contract-summary strong { color:#7a5a12; font-size:12px; }.contract-summary small { color:#8b7950; font-size:10px; white-space:nowrap; }.contract-summary.ready { border-color:#b9dfc7; background:#f0fbf4; }.contract-summary.ready strong { color:#157747; }.contract-summary.failed { border-color:#efc2c9; background:#fff3f4; }.contract-summary.failed strong { color:#a42336; }.contract-summary.compact { min-width:124px; padding:4px 6px; }.contract-detail-meta { display:flex; flex-wrap:wrap; gap:7px 14px; color:var(--muted); font-size:11px; }.contract-print-button { white-space:nowrap; }.contract-esign-button[disabled] { color:#7d8796; border-color:#dce1e8; background:#f5f7fa; cursor:not-allowed; }.contract-detail-section .contract-summary:not(.compact) { width:max-content; max-width:100%; }
@media (max-width:760px) { .styling-flow { grid-template-columns:1fr; }.styling-output-grid,.model-reference-grid { grid-template-columns:1fr; }.styling-section-head { align-items:flex-start; flex-direction:column; }.section-actions { justify-content:flex-start; }.styling-output-preview img { height:280px; } }

/* Monthly product scheduling board. */
.schedule-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:16px; padding:24px 26px; border:1px solid #dce5f3; border-radius:8px; background:#f7faff; }
.schedule-hero h2 { margin:2px 0 6px; color:#18243a; font-size:26px; }
.schedule-hero p { margin:0; color:#5e6c83; }
.schedule-hero .eyebrow { margin:0 0 5px; color:#2463eb; font-size:12px; font-weight:700; }
.schedule-toolbar { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.schedule-toolbar label { display:grid; gap:5px; color:#5e6c83; font-size:12px; }
.schedule-toolbar input,.schedule-toolbar select { min-height:36px; padding:0 9px; border:1px solid #cbd4e3; border-radius:6px; background:#fff; color:#172033; }
.schedule-toolbar .icon-button { display:inline-grid; place-items:center; min-width:36px; height:36px; padding:0 8px; border:1px solid #ccd5e4; border-radius:6px; color:#536074; background:#fff; }
.schedule-toolbar .icon-button:hover { border-color:#2463eb; color:#2463eb; }
.schedule-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.schedule-kpi { display:grid; gap:6px; min-height:112px; padding:17px 18px; border:1px solid #e0e6ef; border-radius:8px; background:#fff; }
.schedule-kpi span { color:#667386; font-size:12px; }
.schedule-kpi strong { color:#1d2a41; font-size:28px; line-height:1.1; }
.schedule-kpi small { color:#8a95a5; font-size:11px; }
.schedule-kpi.warning { border-color:#f0d49d; background:#fffaf2; }
.schedule-kpi.warning strong { color:#b06a11; }
.schedule-kpi.ok strong { color:#20895b; }
.schedule-board { overflow:hidden; }
.schedule-board-count { color:#2463eb; font-size:12px; }
.schedule-card { padding:18px 20px 20px; border-top:1px solid #e5e9f0; }
.schedule-card:first-of-type { border-top:0; }
.schedule-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.schedule-period { display:flex; align-items:center; gap:10px; }
.schedule-period span { display:inline-flex; align-items:center; min-height:26px; padding:0 9px; border-radius:13px; color:#1748ae; background:#eaf2ff; font-weight:700; }
.schedule-influencer { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border:1px solid #d8e4fa; border-radius:12px; color:#49658e; background:#f5f8fd; font-size:11px; font-style:normal; font-weight:600; }
.schedule-period strong { color:#28364f; font-size:15px; }
.schedule-card-head p { margin:7px 0 0; color:#788498; font-size:12px; }
.schedule-card-note { margin:13px 0 0; padding:9px 11px; border-left:3px solid #81a7f3; color:#5a687c; background:#f6f9ff; font-size:12px; }
.schedule-card-actions { display:flex; gap:8px; align-items:center; }
.schedule-card-actions .compact-button { min-height:32px; }
.schedule-product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; }
.schedule-product { display:grid; gap:10px; min-width:0; padding:10px; border:1px solid #e1e7ef; border-radius:7px; background:#fbfcfe; }
.schedule-product-head { display:flex; align-items:center; gap:10px; min-width:0; }
.schedule-product-image { flex:0 0 50px; width:50px; height:64px; object-fit:cover; border-radius:4px; background:#edf1f6; cursor:zoom-in; }
.schedule-product-copy { min-width:0; display:grid; gap:3px; }
.schedule-product-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#2463eb; font-size:13px; }
.schedule-product-copy span,.schedule-product-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#6e7b8f; font-size:11px; }
.schedule-product-status { display:flex; align-items:center; gap:4px; overflow:visible !important; white-space:normal !important; }
.schedule-product-status .tag { min-height:20px; padding:0 6px; font-size:10px; }
.schedule-product-details { border-top:1px solid #e5e9f0; padding-top:8px; }
.schedule-product-details summary { color:#2463eb; cursor:pointer; font-size:11px; font-weight:650; list-style-position:inside; }
.schedule-product-details summary:hover { color:#1748ae; }
.schedule-product-detail-layout { display:block; margin-top:9px; }
.schedule-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 10px; min-width:0; }
.schedule-info-item { min-width:0; display:grid; gap:2px; }
.schedule-info-item dt { color:#8792a3; font-size:10px; }
.schedule-info-item dd { margin:0; overflow-wrap:anywhere; color:#344158; font-size:11px; line-height:1.4; }
.schedule-communication-notes { display:grid; gap:4px; margin-top:9px; padding:8px 9px; border-left:3px solid #81a7f3; color:#536074; background:#f6f9ff; }
.schedule-communication-notes strong { color:#315d58; font-size:11px; }
.schedule-communication-notes p { margin:0; font-size:11px; line-height:1.45; }
.schedule-communication-empty { margin-top:9px; color:#8792a3; font-size:11px; }
.schedule-empty { display:grid; place-items:center; min-height:90px; padding:20px; color:#8792a3; text-align:center; font-size:12px; }
.schedule-empty-board { min-height:220px; gap:6px; }
.schedule-empty-board strong { color:#536074; font-size:15px; }
.schedule-dialog { max-width:980px; }
.schedule-dialog .dialog-help { margin-bottom:14px; }
.schedule-picker-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:16px; }
.schedule-picker-heading strong { color:#344158; }
.schedule-picker-heading small { color:#8792a3; font-size:11px; }
.schedule-product-picker { display:grid; gap:10px; margin-top:7px; padding:12px; border:1px solid #dfe5ee; border-radius:7px; background:#fbfcfe; }
.schedule-product-search input { width:100%; min-height:36px; padding:0 10px; border:1px solid #cbd4e3; border-radius:6px; background:#fff; }
.schedule-selected-products { display:flex; flex-wrap:wrap; gap:7px; min-height:30px; }
.schedule-selected-chip { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:3px 5px 3px 4px; border:1px solid #c5d6f6; border-radius:15px; color:#1748ae; background:#edf4ff; font-size:12px; }
.schedule-selected-chip img { width:23px; height:23px; object-fit:cover; border-radius:3px; background:#dfe7f4; }
.schedule-selected-chip .icon-button { width:22px; min-width:22px; height:22px; padding:0; border:0; background:transparent; color:#58729b; }
.schedule-picker-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:360px; overflow:auto; padding-right:3px; }
.schedule-product-option { display:grid; grid-template-columns:18px 42px minmax(0,1fr); align-items:center; gap:8px; min-width:0; padding:8px; border:1px solid #e1e7ef; border-radius:6px; background:#fff; cursor:pointer; }
.schedule-product-option.selected { border-color:#8db1f4; background:#f3f7ff; }
.schedule-product-option input { margin:0; }
.schedule-product-option img { width:42px; height:54px; object-fit:cover; border-radius:4px; background:#edf1f6; }
.schedule-product-option span { display:grid; gap:3px; min-width:0; }
.schedule-product-option strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#2463eb; font-size:12px; }
.schedule-product-option small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#788498; font-size:10px; }
@media (max-width:1000px) { .schedule-product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .schedule-hero { align-items:flex-start; flex-direction:column; padding:18px; }.schedule-toolbar { width:100%; align-items:flex-start; }.schedule-toolbar label { flex:1; }.schedule-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.schedule-product-grid,.schedule-picker-list { grid-template-columns:1fr; }.schedule-card-head { flex-direction:column; }.schedule-card-actions { width:100%; }.schedule-card-actions button { flex:1; }.schedule-info-grid { grid-template-columns:1fr; } }

/* 2026 visual system refresh: charcoal, teal and neutral enterprise palette. */
:root {
  --ink:#183033;
  --muted:#647574;
  --line:#dbe5e2;
  --surface:#fff;
  --canvas:#f3f6f5;
  --blue:#0f766e;
  --green:#177457;
  --orange:#b46b18;
  --red:#c2414f;
  --violet:#526f8f;
  --radius:8px;
  --primary:#0f766e;
  --primary-strong:#0b5f59;
  --primary-soft:#e8f4f1;
  --sidebar:#132628;
  --sidebar-hover:#1b3536;
  --sidebar-active:#234b49;
}
html,body { background:var(--canvas); }
body { color:var(--ink); }
::selection { color:#fff; background:#247f77; }
button,input,select,textarea { letter-spacing:0; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid #9bcac4; outline-offset:2px; }
.app-shell { grid-template-columns:228px minmax(0,1fr); }
.sidebar { padding:20px 14px; color:#dbe7e5; background:var(--sidebar); box-shadow:10px 0 28px rgba(21,50,49,.08); min-height:100vh; height:100vh; overflow:hidden; }
.brand { gap:11px; padding:0 8px 18px; border-bottom:1px solid rgba(218,235,232,.14); }
.brand-mark { width:40px; height:40px; flex-basis:40px; border:1px solid #a9cbc5; border-radius:7px; background:#e4f1ee; box-shadow:none; }
.brand-mark::after { right:6px; bottom:5px; width:10px; height:2px; border-radius:2px; background:#33877e; }
.brand-mark b { color:#174b47; font-size:13px; font-weight:800; }
.brand-copy strong { color:#f7fbfa; font-size:16px; }
.brand-copy small { color:#91aaa7; font-size:10px; }
.nav { gap:5px; margin-top:16px; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:rgba(143,199,190,.45) transparent; padding-right:3px; }
.nav::-webkit-scrollbar { width:7px; }
.nav::-webkit-scrollbar-track { background:transparent; }
.nav::-webkit-scrollbar-thumb { border-radius:8px; background:rgba(143,199,190,.45); }
.nav-group { display:grid; gap:3px; }
.nav-group-trigger { width:100%; min-height:40px; display:flex; align-items:center; gap:10px; padding:0 12px; border:0; border-radius:6px; color:#e0eeeb; background:transparent; text-align:left; font-weight:720; }
.nav-group-trigger span { width:16px; color:#86a5a1; text-align:center; }
.nav-group-trigger i { margin-left:auto; color:#86a5a1; font-style:normal; font-size:14px; transition:transform .16s ease; }
.nav-group-trigger:hover { color:#fff; background:var(--sidebar-hover); }
.nav-group.is-collapsed .nav-group-trigger i { transform:rotate(-90deg); }
.nav-group.is-collapsed .nav-group-menu { display:none; }
.nav-group-menu { display:grid; gap:3px; padding-left:10px; border-left:1px solid rgba(144,184,177,.24); margin-left:19px; }
.nav-group-menu .nav-item { min-height:36px; padding-left:12px; font-size:13px; }
.nav-top-level { margin-top:3px; }
.nav-dashboard-entry { margin-bottom:6px; border:1px solid rgba(129,190,181,.24); background:rgba(41,91,87,.32); font-weight:760; }
.nav-dashboard-entry:hover { background:var(--sidebar-hover); }
.nav-dashboard-entry.active { background:var(--sidebar-active); }
.nav-group-menu .nav-item.active { box-shadow:inset 2px 0 0 #66b8ad; }
.nav-item { min-height:42px; padding:0 12px; border-radius:6px; color:#c2d2d0; }
.nav-item span { color:#86a5a1; }
.nav-item:hover { color:#fff; background:var(--sidebar-hover); }
.nav-item.active { color:#fff; background:var(--sidebar-active); box-shadow:inset 3px 0 0 #66b8ad; }
.nav-item.active span { color:#a9ded7; }
.nav-item b { background:#b93343; }
.sidebar-footer { color:#8fa9a5; border-top-color:rgba(218,235,232,.14); }
.hr-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:16px; padding:22px 24px; border:1px solid #cfe1dd; border-radius:8px; background:#f4faf8; }
.hr-hero h2 { margin:3px 0 6px; color:#183033; font-size:25px; }
.hr-hero p:not(.eyebrow) { margin:0; color:#637775; }
.hr-hero-meta { display:grid; gap:4px; justify-items:end; color:#6d8180; font-size:11px; text-align:right; }
.hr-hero-actions { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.hr-import-dialog { width:min(760px,calc(100vw - 30px)); }
.hr-import-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 13px; }
.hr-import-toolbar span { color:#718482; font-size:11px; }
.hr-import-dropzone { display:grid; place-items:center; gap:5px; min-height:126px; padding:18px; border:1px dashed #9bcac4; border-radius:8px; color:#245a55; background:#f5fbf9; text-align:center; cursor:pointer; transition:border-color .15s ease,background .15s ease; }
.hr-import-dropzone:hover,.hr-import-dropzone:focus-within,.hr-import-dropzone.is-dragging { border-color:#0f766e; background:#edf8f5; box-shadow:0 0 0 3px rgba(15,118,110,.08); }
.hr-import-dropzone input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.hr-import-dropzone strong { font-size:14px; }
.hr-import-dropzone small { color:#718482; font-size:11px; }
.hr-import-preview { display:grid; gap:10px; min-height:116px; margin-top:14px; padding:12px; border:1px solid #dce9e6; border-radius:7px; background:#fbfdfc; }
.hr-import-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.hr-import-summary span { display:grid; gap:2px; padding:9px 10px; border:1px solid #e4eeeb; border-radius:6px; color:#718482; background:#fff; font-size:11px; }
.hr-import-summary b { color:#245a55; font-size:18px; }
.hr-import-summary b.has-error { color:#c2414f; }
.hr-import-success,.hr-import-errors { display:grid; gap:4px; padding:11px 12px; border-radius:6px; font-size:12px; line-height:1.5; }
.hr-import-success { border:1px solid #bfe0d2; color:#17645c; background:#effaf5; }
.hr-import-success span { color:#5b7772; font-size:11px; }
.hr-import-errors { border:1px solid #efc2c9; color:#9b3f4a; background:#fff5f6; }
.hr-import-errors span,.hr-import-errors small { color:#916f74; font-size:11px; }
.hr-import-errors ul { display:grid; gap:3px; max-height:120px; overflow:auto; margin:2px 0 0; padding-left:18px; }
.hr-import-preview-table { max-height:190px; overflow:auto; }
.hr-import-preview-table .product-table { min-width:560px; font-size:11px; }
.hr-import-preview-table .product-table th,.hr-import-preview-table .product-table td { padding:7px 8px; }
.hr-import-preview-table > small { display:block; margin-top:6px; }
.hr-import-loading { display:grid; place-items:center; gap:8px; min-height:90px; color:#637775; font-size:12px; }
.hr-employee-dialog { width:100%; max-width:100%; box-sizing:border-box; }
.hr-account-provisioning { display:grid; gap:12px; margin:14px 0 4px; padding:14px; border:1px solid #d9cbea; border-radius:8px; background:#fbf9ff; }
.hr-account-provisioning-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.hr-account-provisioning-head > div { display:grid; gap:4px; }
.hr-account-provisioning-head strong { color:#4c3b70; font-size:13px; }
.hr-account-provisioning-head small,.hr-role-recommendation { color:#786b88; font-size:11px; line-height:1.5; }
.hr-account-toggle { display:flex !important; align-items:center; gap:6px; flex:0 0 auto; color:#644d87 !important; font-weight:700; white-space:nowrap; }
.hr-account-fields { margin-top:2px; }
.hr-account-fields[hidden] { display:none; }
.hr-account-fields small { grid-column:1 / -1; margin-top:-5px; }
.hr-organization-dialog { width:min(820px,calc(100vw - 30px)); max-height:min(850px,calc(100vh - 28px)); overflow:auto; }
.hr-role-mapping-editor { display:grid; gap:10px; margin-top:4px; padding:13px; border:1px solid #dce9e6; border-radius:8px; background:#f8fcfb; }
.hr-role-mapping-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hr-role-mapping-head > div { display:grid; gap:3px; }
.hr-role-mapping-head strong { color:#245a55; font-size:13px; }
.hr-role-mapping-head small { color:#718482; font-size:11px; }
.hr-role-mapping-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.3fr) auto; align-items:center; gap:8px; padding:9px; border:1px solid #dce9e6; border-radius:7px; background:#fff; }
.hr-role-mapping-row.has-legacy { border-color:#e3c98f; background:#fffdf5; }
.hr-role-mapping-row select { min-width:0; }
.hr-role-mapping-warning { grid-column:1 / -1; color:#9a6a1c; font-size:11px; line-height:1.45; }
.hr-role-mapping-empty { padding:14px; border:1px dashed #c9dcd8; border-radius:6px; color:#718482; background:#fff; text-align:center; font-size:12px; }
.hr-role-mapping-panel { margin-top:16px; }
.hr-role-mapping-panel .hr-table { min-width:520px; }
.hr-status-dialog { width:min(560px,calc(100vw - 30px)); }
.hr-generated-number-box { display:flex; align-items:center; gap:8px; min-height:39px; padding:8px 10px; border:1px solid #cbdad7; border-radius:5px; background:#f4faf8; }
.hr-generated-number-box small { color:#718482; font-size:11px; }
.hr-generated-number { color:#17645c; font-size:18px; font-weight:750; letter-spacing:.04em; }
.hr-generated-number.pending { color:#708783; font-size:13px; font-weight:650; letter-spacing:0; }
.hr-employee-more { margin-top:14px; padding:11px 13px; border:1px solid #dce9e6; border-radius:7px; background:#f8fcfb; }
.hr-employee-more summary { color:#245a55; cursor:pointer; font-size:12px; font-weight:700; }
.hr-employee-more .form-grid { margin-top:13px; }
.hr-privacy-badge { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border:1px solid #afd1c9; border-radius:12px; color:#17645c; background:#e5f4ef; font-size:11px; font-weight:700; }
.hr-privacy-badge.limited { color:#76581d; border-color:#e3c98f; background:#fff8e9; }
.hr-table-wrap { margin-bottom:16px; }
.hr-section-title { margin:20px 0 8px; color:#245a55; font-size:16px; }
.hr-table { min-width:940px; }
.hr-table td,.hr-table th { white-space:nowrap; }
.hr-metrics { grid-template-columns:repeat(5,minmax(0,1fr)); }
.hr-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr); gap:16px; }
.hr-module-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:16px; }
.hr-module-links button { display:flex; justify-content:space-between; align-items:center; min-height:48px; text-align:left; }
.hr-module-links b { color:var(--primary); }
.hr-source-list { display:grid; gap:12px; margin:0; padding:16px; }
.hr-source-list div { display:grid; gap:3px; }
.hr-source-list dt { color:#80918f; font-size:11px; }
.hr-source-list dd { margin:0; overflow-wrap:anywhere; color:#355452; font-size:12px; }
.hr-placeholder { margin-top:16px; }
.hr-performance-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:16px; }
.hr-performance-grid article { display:grid; gap:5px; min-height:98px; padding:13px; border:1px solid #dce9e6; border-radius:7px; background:#f8fcfb; }
.hr-performance-grid strong { color:#245a55; }
.hr-performance-grid span { color:#718482; font-size:12px; }
.center-placeholder { margin-top:8px; }
.center-placeholder-body { display:grid; gap:7px; min-height:180px; place-content:center; padding:24px; color:#738482; text-align:center; }
.center-placeholder-body strong { color:#315b57; font-size:16px; }
.finance-invoice-toolbar { align-items:flex-end; }
.finance-invoice-toolbar p { max-width:760px; }
.finance-invoice-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.finance-invoice-preview { display:flex; flex-wrap:wrap; gap:10px 22px; padding:11px 13px; border:1px solid #e4e8f0; border-radius:8px; background:#fafbfe; color:#66738a; font-size:12px; }
.finance-invoice-preview strong { color:#263b61; }
.finance-invoice-table td { vertical-align:top; }
.finance-invoice-table td > .subtle { display:block; margin-top:4px; }
.finance-invoice-table .row-actions { margin-top:8px; min-width:0; }
@media (max-width:760px) { .finance-invoice-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.finance-invoice-toolbar { align-items:flex-start; flex-direction:column; } }
.permission-empty { display:flex; align-items:center; gap:18px; min-height:260px; padding:42px 48px; border:1px solid #e5e2f4; background:linear-gradient(135deg,#fff 0%,#faf9ff 100%); }
.permission-empty-icon { display:grid; place-items:center; width:54px; height:54px; flex:0 0 54px; border:1px solid #ddd7f1; border-radius:16px; color:#7666ae; background:#f1effb; font-size:24px; }
.permission-empty-copy { display:grid; gap:8px; }
.permission-empty-copy .status-tag { width:max-content; color:#7666ae; border-color:#ddd7f1; background:#f1effb; }
.permission-empty-copy h2 { margin:0; color:#2f3550; font-size:21px; }
.permission-empty-copy p { margin:0; color:#4f5870; font-size:15px; font-weight:650; }
.permission-empty-copy small { color:#8790a3; font-size:12px; }
.hr-loading,.hr-error { display:grid; gap:9px; place-content:center; min-height:220px; padding:24px; text-align:center; }
.hr-error h2 { margin:0; color:#9b3f4a; }
.hr-error p { margin:0; color:#6d7778; }
.workspace,.page { background:var(--canvas); }
.topbar { height:76px; padding:0 30px; border-color:var(--line); background:rgba(255,255,255,.98); box-shadow:0 1px 0 rgba(22,57,54,.03); }
.topbar h1 { color:var(--ink); font-size:20px; font-weight:720; }
.search,.top-actions select,.user-menu,.icon-button,.secondary { color:#304d4d; border-color:#d6e2df; background:#fff; }
.search:focus-within { border-color:#5fa69e; box-shadow:0 0 0 3px #e4f2ef; }
.search span { color:#77908e; }
.search input::placeholder { color:#98aaa8; }
.user-menu:hover,.icon-button:hover,.secondary:hover { color:#0b5f59; border-color:#91bbb5; background:#f5faf9; }
.primary,.auth-submit { color:#fff; border-color:var(--primary); background:var(--primary); box-shadow:0 1px 2px rgba(13,93,86,.18); }
.primary:hover,.auth-submit:hover { border-color:var(--primary-strong); background:var(--primary-strong); }
.action-link,a,.panel-head a { color:var(--primary); }
.action-link:hover,a:hover,.panel-head a:hover { color:var(--primary-strong); }
.panel,.metric,.metric-card,.summary-card,.role-card,.schedule-kpi,.operation-connector-card { border-color:var(--line); background:#fff; box-shadow:0 1px 2px rgba(21,50,49,.035); }
.metric:hover,.metric-card:hover,.summary-card:hover { border-color:#b7d2cd; }
.panel-head { border-color:var(--line); }
.product-table thead th,table thead th { color:#556c6b; border-color:var(--line); background:#f5f8f7; }
.product-table td,table td { border-color:#e6ecea; }
.product-table tbody tr:hover,table tbody tr:hover { background:#f8fbfa; }
.status-tag,.chip,.effect-status { color:#55716e; border-color:#dbe7e4; background:#f0f5f4; }
.filter-chip.selected,.filters button.selected { color:#0b5f59; border-color:#72aaa3; background:var(--primary-soft); }
.form input,.form select,.form textarea,.dialog input,.dialog select,.dialog textarea { color:var(--ink); border-color:#cfdedb; background:#fff; }
.form input:focus,.form select:focus,.form textarea:focus,.dialog input:focus,.dialog select:focus,.dialog textarea:focus { border-color:#5b9f97; outline:0; box-shadow:0 0 0 3px #e4f2ef; }
.dialog { border-color:var(--line); background:#fff; box-shadow:0 28px 70px rgba(16,42,41,.22); }
.dialog::backdrop { background:rgba(15,35,35,.54); backdrop-filter:blur(2px); }
.toolbar-note,.subtle,.metric-note { color:var(--muted); }
.schedule-hero,.styling-output-section,.operation-data-filter-group,.privacy-notice { border-color:#cfe1dd; background:#f4faf8; }
.schedule-hero .eyebrow,.operation-data-all-months,.manual-styling-upload summary,.schedule-product-copy strong,.schedule-product-option strong { color:var(--primary); }
.schedule-period span,.schedule-selected-chip,.styling-section-head>strong { color:#155e57; border-color:#c5ded9; background:#eaf5f2; }
.schedule-toolbar .icon-button:hover { color:var(--primary); border-color:var(--primary); }
.schedule-period-hint { margin:0 0 14px; padding:10px 12px; border-left:3px solid #76bcb1; border-radius:7px; color:#456864; background:#f0f9f7; line-height:1.55; }
.schedule-period-hint.schedule-period-conflict { border-left-color:#c33f4d; color:#9c2e3d; background:#fff1f3; }
.operation-data-bar i { background:#0f766e; }
.operation-data-bar-row:nth-child(2) .operation-data-bar i { background:#3c7d8a; }
.operation-data-bar-row:nth-child(3) .operation-data-bar i { background:#b47a32; }
.operation-data-bar-row:nth-child(4) .operation-data-bar i { background:#4f7b5b; }
.operation-data-influencer-summary b { color:var(--primary); }
.privacy-notice { border-left-color:#4e9a91; }
.model-profile-avatar { background:#347e77; }
.model-reference-slot:hover,.model-reference-slot:focus-visible { border-color:#68a69f; background:#f2f9f7; }
.auth-workspace { background:#eef3f1; }
.auth-workspace .topbar { display:none; }
.auth-workspace #page { min-height:100vh; padding:32px; display:grid; place-items:center; background:#eef3f1; }
.auth-shell { width:min(1040px,100%); min-height:620px; display:grid; grid-template-columns:minmax(330px,.82fr) minmax(440px,1.18fr); overflow:hidden; border:1px solid #d6e2df; border-radius:8px; background:#fff; box-shadow:0 30px 80px rgba(18,48,46,.12); }
.auth-brand-panel { min-height:620px; padding:52px 46px 40px; color:#fff; border:0; background:#142928; }
.auth-brand-mark { display:grid; place-items:center; width:58px; height:58px; margin:0 0 34px; color:#164c47; border:1px solid #75aaa4; border-radius:8px; background:#e4f2ef; box-shadow:none; font-size:16px; font-weight:850; }
.auth-company { margin:0 0 10px; color:#8cc4bd; font-size:14px; font-weight:700; }
.auth-brand-panel h1 { max-width:260px; margin:0; color:#fff; font-size:34px; line-height:1.25; }
.auth-brand-note { max-width:280px; margin:18px 0 0; color:#a9bfbc; font-size:14px; line-height:1.8; }
.auth-brand-footer { color:#91aaa7; }
.auth-panel { width:100%; max-width:520px; margin:auto; padding:66px 64px 48px; }
.auth-kicker { color:#0f766e; font-size:12px; font-weight:750; }
.auth-panel h2 { margin-top:18px; color:#183033; font-size:31px; }
.auth-intro { color:#71817f; }
.auth-form { gap:20px; margin-top:38px; }
.auth-form label { color:#304d4d; font-weight:650; }
.auth-form input { height:50px; border-color:#cbdad7; border-radius:6px; }
.auth-form input:focus { border-color:#5b9f97; outline:0; box-shadow:0 0 0 3px #e4f2ef; }
.password-toggle,.password-toggle:hover { color:#0f766e; }
.auth-submit { min-height:50px; border-radius:6px; font-weight:700; }
.auth-error { color:#bd3849; }
.auth-copyright { color:#9aa8a6; }
@media (max-width:760px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { box-shadow:none; }
  .nav { display:flex; overflow:auto; align-items:flex-start; }
  .nav-group { display:flex; flex:0 0 auto; align-items:flex-start; position:relative; }
  .nav-group-trigger { width:auto; min-height:38px; white-space:nowrap; padding:0 10px; }
  .nav-group-trigger i { margin-left:4px; }
  .nav-group-menu { position:absolute; z-index:4; display:none; min-width:190px; margin:38px 0 0; padding:7px; border:1px solid #315253; border-radius:7px; background:#17302f; box-shadow:0 12px 26px rgba(0,0,0,.2); }
  .nav-group:not(.is-collapsed):focus-within .nav-group-menu,.nav-group:hover .nav-group-menu { display:grid; }
  .nav-group-menu .nav-item { width:100%; white-space:nowrap; }
  .nav-group.is-collapsed .nav-group-menu { display:none; }
  .nav-top-level { width:auto; white-space:nowrap; margin-top:0; }
  .auth-workspace #page { min-height:100dvh; padding:14px; align-items:center; }
  .auth-shell { min-height:auto; grid-template-columns:1fr; }
  .auth-brand-panel { min-height:150px; padding:28px; border:0; border-top:4px solid #4f9a91; }
  .auth-brand-mark { width:42px; height:42px; margin-bottom:18px; font-size:12px; }
  .auth-company { margin-bottom:6px; }
  .auth-brand-panel h1 { font-size:24px; }
  .auth-brand-note { margin-top:8px; font-size:12px; }
  .auth-brand-footer { display:none; }
  .auth-panel { max-width:none; padding:34px 26px 30px; }
  .auth-panel h2 { font-size:26px; }
  .auth-form { margin-top:28px; }
  .hr-hero { align-items:flex-start; flex-direction:column; padding:18px; }
  .hr-hero h2 { font-size:22px; }
  .hr-hero-meta { justify-items:start; text-align:left; }
  .hr-dashboard-grid { grid-template-columns:1fr; }
  .hr-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .hr-performance-grid { grid-template-columns:1fr 1fr; }
  .hr-import-summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .hr-import-summary span { padding:8px 6px; }
  .hr-import-summary b { font-size:16px; }
}

/* Multi-module workspace: keep opened business areas available as lightweight tabs. */
.workspace-tabs { display:flex; align-items:center; gap:6px; min-height:48px; padding:7px 30px; overflow-x:auto; border-bottom:1px solid var(--line); background:#fbfdfc; scrollbar-width:thin; }
.workspace-tab { display:flex; align-items:stretch; flex:0 0 auto; min-height:32px; border:1px solid #d6e2df; border-radius:6px; background:#fff; color:#4d6563; box-shadow:0 1px 1px rgba(21,50,49,.03); }
.workspace-tab:hover { border-color:#91bbb5; background:#f5faf9; }
.workspace-tab.active { border-color:#5fa69e; color:#0b5f59; background:#eaf5f2; box-shadow:0 0 0 2px #d8eeea; }
.workspace-tab-main { min-width:0; max-width:190px; padding:0 12px; overflow:hidden; border:0; border-radius:5px 0 0 5px; background:transparent; color:inherit; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:650; }
.workspace-tab-main:focus-visible { outline-offset:-3px; }
.workspace-tab-close { width:30px; min-height:30px; padding:0; border:0; border-left:1px solid #e3ece9; border-radius:0 5px 5px 0; background:transparent; color:#76908d; font-size:18px; line-height:1; }
.workspace-tab-close:hover { color:#b13c4a; background:#fff0f1; }
.workspace-tab-close:focus-visible { outline-offset:-3px; }
.auth-workspace .workspace-tabs { display:none; }
@media (max-width:760px) {
  .workspace-tabs { min-height:44px; padding:6px 16px; gap:5px; }
  .workspace-tab-main { max-width:150px; padding:0 10px; }
  .workspace-tab-close { width:28px; min-height:28px; }
}

/* Controlled pattern and fitting attachments: preview in place, never force a download. */
.attachment-picker { display:grid; gap:4px; min-height:72px; place-content:center; margin-top:7px; padding:12px 14px; border:1px dashed #a9c8c2; border-radius:7px; color:#315d58; background:#f6fbfa; cursor:pointer; text-align:center; }
.attachment-picker:hover,.attachment-picker:focus-visible,.attachment-picker.drag-over { border-color:#4e9a91; background:#e8f4f1; }
.attachment-picker strong { font-size:12px; }
.attachment-picker small { color:var(--muted); font-size:11px; line-height:1.4; }
.attachment-picker-list { display:flex; flex-wrap:wrap; gap:6px; min-height:28px; margin-top:7px; }
.attachment-picker-chip { display:inline-flex; align-items:center; gap:5px; min-height:27px; max-width:100%; padding:3px 7px 3px 9px; border:1px solid #c7ddd8; border-radius:14px; color:#315d58; background:#f1f8f6; font-size:11px; }
.attachment-picker-chip button { width:19px; height:19px; padding:0; border:0; border-radius:50%; color:#6b8581; background:transparent; cursor:pointer; font-size:15px; line-height:1; }
.attachment-picker-chip button:hover { color:#b13c4a; background:#fff0f1; }
.attachment-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin-top:10px; }
.attachment-card { min-width:0; overflow:hidden; border:1px solid #dbe5e2; border-radius:7px; background:#fbfdfc; }
.attachment-video { display:block; width:100%; max-height:260px; background:#132628; }
.attachment-image { display:block; width:100%; height:180px; object-fit:contain; background:#f1f5f4; cursor:zoom-in; }
.attachment-meta { display:grid; gap:3px; padding:8px 9px 9px; }
.attachment-meta strong { overflow:hidden; color:#315d58; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.attachment-meta small { color:var(--muted); font-size:11px; }
@media (max-width:760px) {
  .attachment-list { grid-template-columns:1fr; }
  .attachment-image { height:220px; }
  .attachment-picker { min-height:64px; }
}

/* 2026-08-25 visual refresh: high-contrast navigation, calmer surfaces and a focused sign-in experience. */
:root {
  --canvas:#f3f7f6;
  --surface:#ffffff;
  --surface-soft:#f8fbfa;
  --line:#dbe8e5;
  --ink:#173331;
  --muted:#6a817d;
  --primary:#0f766e;
  --primary-strong:#0a5b55;
  --primary-soft:#e6f4f1;
  --sidebar:#102c2b;
  --sidebar-hover:#1b403e;
  --sidebar-active:#215c57;
  --radius:12px;
}
html,body { min-height:100%; background:var(--canvas); }
body { color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
.app-shell { grid-template-columns:248px minmax(0,1fr); background:linear-gradient(135deg,#f8fbfa 0%,#f1f6f5 100%); }
.sidebar { padding:18px 14px; background:var(--sidebar); box-shadow:12px 0 34px rgba(16,44,43,.12); }
.brand { min-height:72px; padding:4px 9px 18px; border-bottom-color:rgba(197,227,221,.16); }
.brand-mark { width:42px; height:42px; flex-basis:42px; border:1px solid #8fc7be; border-radius:12px; background:linear-gradient(145deg,#e9f7f4,#bfe0d9); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.brand-mark::after { right:7px; bottom:6px; width:11px; height:3px; background:#2f887f; }
.brand-mark b { color:#15504b; font-size:14px; }
.brand-copy strong { color:#f2fbf9; font-size:17px; letter-spacing:.01em; }
.brand-copy small { color:#91b1ac; }
.nav { gap:5px; margin-top:17px; }
.nav-item { min-height:42px; padding:0 12px; border:1px solid transparent; border-radius:9px; color:#b8d0cc; font-size:13px; font-weight:590; transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease; }
.nav-item span { color:#84aaa4; }
.nav-item:hover { color:#f5fbfa; background:var(--sidebar-hover); border-color:rgba(150,209,199,.12); transform:translateX(1px); }
.nav-item.active { color:#fff; background:linear-gradient(100deg,#276e67,#1f5652); border-color:#63b7ab; box-shadow:inset 3px 0 0 #8bd2c7,0 6px 16px rgba(5,42,39,.18); }
.nav-item.active span { color:#b9e7df; }
.nav-group { gap:4px; }
.nav-group-trigger { min-height:42px; padding:0 12px; border-radius:9px; color:#d1e5e1; font-size:13px; }
.nav-group-trigger span,.nav-group-trigger i { color:#83aaa4; }
.nav-group-trigger:hover { color:#fff; background:var(--sidebar-hover); }
.nav-group-menu { gap:4px; padding:6px 0 6px 11px; margin-left:20px; border-left-color:rgba(144,201,191,.24); }
.nav-group-menu .nav-item { min-height:38px; padding-left:13px; color:#a9c5c0; font-size:12px; }
.nav-group-menu .nav-item:hover { color:#f4fbf9; }
.nav-group-menu .nav-item.active { background:rgba(39,110,103,.72); box-shadow:inset 3px 0 0 #7fcbbf; }
.nav-dashboard-entry { margin-bottom:8px; border-color:rgba(141,205,194,.25); background:linear-gradient(100deg,rgba(41,102,96,.62),rgba(26,68,65,.55)); font-weight:720; }
.nav-dashboard-entry.active { background:linear-gradient(100deg,#2b746c,#215852); }
.sidebar-footer { color:#8eaaa5; border-top-color:rgba(197,227,221,.16); }
.workspace { min-width:0; background:transparent; }
.topbar { height:78px; padding:0 34px; border-bottom-color:rgba(208,226,222,.9); background:rgba(255,255,255,.86); box-shadow:0 1px 0 rgba(17,52,48,.03); backdrop-filter:blur(14px); }
.topbar h1 { color:var(--ink); font-size:20px; font-weight:760; }
.search { width:300px; border-color:#d2e2df; border-radius:10px; background:rgba(249,252,251,.9); }
.search:focus-within { border-color:#76bcb1; box-shadow:0 0 0 4px #e5f4f1; }
.user-menu,.icon-button { border-color:#d2e2df; border-radius:10px; background:rgba(255,255,255,.9); }
.page { max-width:1760px; padding:30px 34px 54px; }
.panel,.metric,.metric-card,.summary-card,.role-card,.schedule-kpi,.operation-connector-card { border-color:var(--line); border-radius:var(--radius); box-shadow:0 8px 24px rgba(23,68,63,.045); }
.panel-head { padding:17px 19px; border-bottom-color:#e3eeeb; }
.panel-head h3 { color:#1a3b38; font-size:15px; font-weight:740; }
.metrics { gap:14px; }
.metric { padding:18px; }
.metric-value { color:#173b37; }
.primary,.auth-submit { border-radius:10px; background:var(--primary); box-shadow:0 7px 16px rgba(15,118,110,.18); }
.primary:hover,.auth-submit:hover { background:var(--primary-strong); transform:translateY(-1px); }
.secondary { border-color:#d2e2df; border-radius:9px; color:#31534f; background:#fff; }
.secondary:hover { border-color:#89beb6; color:#0d665e; background:#f4faf8; }
.product-table { border-spacing:0; }
.product-table th,table thead th { padding:13px 14px; color:#58706c; background:#f4f9f7; border-bottom-color:#dceae6; font-weight:720; }
.product-table td,table td { padding:12px 14px; border-bottom-color:#e7efed; }
.product-table tbody tr:hover,table tbody tr:hover { background:#f4faf8; }
.tag { border-radius:999px; font-weight:650; }
.workspace-tabs { min-height:52px; padding:8px 34px; border-bottom-color:#dceae7; background:rgba(248,252,251,.86); }
.workspace-tab { border-color:#d4e3df; border-radius:9px; }
.workspace-tab.active { border-color:#69b3aa; background:#e7f5f2; box-shadow:0 0 0 3px #d8efeb; }
.auth-workspace { background:radial-gradient(circle at 12% 12%,#d9f0eb 0%,transparent 34%),linear-gradient(135deg,#eff7f5 0%,#e4efed 100%); }
.auth-workspace #page { min-height:100dvh; padding:clamp(18px,4vw,56px); }
.auth-shell { width:min(1080px,100%); min-height:640px; grid-template-columns:minmax(340px,.86fr) minmax(450px,1.14fr); border:1px solid rgba(185,215,209,.85); border-radius:22px; box-shadow:0 28px 80px rgba(20,66,61,.16); }
.auth-brand-panel { position:relative; min-height:640px; padding:58px 52px 42px; overflow:hidden; background:linear-gradient(145deg,#123533 0%,#0b5851 100%); }
.auth-brand-panel::before,.auth-brand-panel::after { content:""; position:absolute; border:1px solid rgba(190,239,230,.17); border-radius:50%; pointer-events:none; }
.auth-brand-panel::before { width:430px; height:430px; right:-220px; top:-160px; box-shadow:0 0 0 30px rgba(186,234,226,.04),0 0 0 60px rgba(186,234,226,.025); }
.auth-brand-panel::after { width:270px; height:270px; left:-160px; bottom:-120px; }
.auth-brand-panel > * { position:relative; z-index:1; }
.auth-brand-mark { width:62px; height:62px; margin-bottom:42px; border:1px solid #9ed5cd; border-radius:16px; background:linear-gradient(145deg,#ebfaf7,#b8ddd5); box-shadow:0 10px 24px rgba(0,0,0,.15); }
.auth-company { color:#a8d8d0; font-size:14px; letter-spacing:.04em; }
.auth-brand-panel h1 { max-width:290px; font-size:36px; letter-spacing:.01em; }
.auth-brand-note { max-width:300px; color:#b8d7d1; line-height:1.9; }
.auth-brand-footer { border-top-color:rgba(185,239,230,.18); color:#9bc4be; }
.auth-panel { max-width:540px; padding:74px 72px 52px; }
.auth-kicker { margin-bottom:12px; color:#168076; letter-spacing:.04em; }
.auth-panel h2 { margin-top:0; color:#173b37; font-size:32px; letter-spacing:-.02em; }
.auth-intro { margin:10px 0 32px; color:#728783; }
.auth-form { gap:20px; margin-top:0; }
.auth-form label { color:#34514d; font-weight:680; }
.auth-form input { height:52px; border-color:#c9dcd7; border-radius:10px; background:#fbfefd; }
.auth-form input:hover { border-color:#9fc6bf; }
.auth-form input:focus { border-color:#4faaa0; box-shadow:0 0 0 4px #e2f3ef; }
.password-field input { padding-right:70px; }
.password-toggle { top:2px; right:2px; height:48px; color:#43857c; }
.auth-submit { min-height:52px; margin-top:6px; font-size:14px; }
.auth-error { padding:9px 11px; border-radius:9px; background:#fff4f5; }
.auth-copyright { color:#96aaa6; }
@media (max-width:760px) {
  .app-shell { display:block; }
  .sidebar { position:sticky; top:0; z-index:20; height:100dvh; min-height:100dvh; overflow:hidden; padding:10px; box-shadow:0 8px 22px rgba(16,44,43,.14); }
  .brand { min-height:58px; padding:0 4px 10px; }
  .nav { position:relative; z-index:21; display:block; overflow-y:auto; overflow-x:hidden; margin-top:10px; padding-right:2px; }
  .nav-group { display:block; }
  .nav-group-menu { position:static; z-index:auto; display:grid; min-width:0; max-height:none; overflow:visible; margin:0 0 4px 20px; padding:6px 0 6px 10px; border:0; border-left:1px solid rgba(144,201,191,.24); border-radius:0; background:transparent; box-shadow:none; }
  .nav-group-menu .nav-item { min-height:38px; padding-left:12px; }
  .nav-group.is-collapsed .nav-group-menu { display:none; }
  .workspace { position:relative; z-index:1; }
  .topbar { min-height:72px; padding:12px 16px; }
  .page { padding:22px 16px 38px; }
  .search { width:210px; }
  .auth-workspace #page { padding:14px; }
  .auth-shell { min-height:auto; border-radius:18px; grid-template-columns:1fr; }
  .auth-brand-panel { min-height:200px; padding:30px 26px 26px; border-top:4px solid #8dd0c5; }
  .auth-brand-mark { width:46px; height:46px; margin-bottom:22px; border-radius:12px; }
  .auth-brand-panel h1 { font-size:27px; }
  .auth-brand-note { margin-top:8px; font-size:12px; }
  .auth-brand-footer { display:none; }
  .auth-panel { max-width:none; padding:34px 26px 30px; }
  .auth-panel h2 { font-size:27px; }
}

/* Sidebar scroll contract: keep every navigation item inside the dark rail. */
.sidebar {
  --sidebar-vh:100vh;
  height:var(--sidebar-vh);
  min-height:var(--sidebar-vh);
  max-height:var(--sidebar-vh);
  overflow:hidden;
}
.nav {
  height:0;
  min-height:0;
  flex:1 1 auto;
  align-content:start;
  grid-auto-rows:max-content;
  overflow-y:scroll;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-gutter:stable;
}
.nav-group-menu {
  position:static;
}
.visually-hidden {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
@supports (height:100dvh) {
  .sidebar {
    --sidebar-vh:100dvh;
  }
}

/* Neutral product branding: a white rail keeps the workspace calm and lets the
   teal active state carry the hierarchy without showing a company identity. */
:root {
  --sidebar:#fff;
  --sidebar-hover:#f2f8f7;
  --sidebar-active:#e5f4f1;
}
.sidebar {
  color:#3a5752;
  background:#fff;
  border-right:1px solid #e2eeeb;
  box-shadow:8px 0 28px rgba(22,67,61,.06);
}
.brand {
  color:#173b37;
  border-bottom-color:#e1ece9;
}
.brand-mark {
  color:#15504b;
  border-color:#8fc7be;
  background:linear-gradient(145deg,#effaf8,#cdebe5);
  box-shadow:0 7px 18px rgba(22,91,83,.12);
}
.brand-mark b { color:#15504b; }
.brand-mark::after { background:#2f887f; }
.brand-copy strong { color:#173b37; font-size:15px; }
.brand-copy small { color:#78928d; }
.nav { scrollbar-color:#b8d8d2 #f7fbfa; }
.nav::-webkit-scrollbar-track { background:#f7fbfa; }
.nav::-webkit-scrollbar-thumb { background:#b8d8d2; }
.nav-group-trigger { color:#3a5752; }
.nav-group-trigger span,.nav-group-trigger i { color:#73a39b; }
.nav-group-trigger:hover { color:#0f625a; background:var(--sidebar-hover); }
.nav-group-menu { border-left-color:#d8e9e5; }
.nav-item { color:#54716c; }
.nav-item span { color:#77a39c; }
.nav-item:hover { color:#0f625a; background:var(--sidebar-hover); }
.nav-item.active { color:#0d5e56; background:var(--sidebar-active); border-color:#98d0c6; box-shadow:inset 3px 0 0 #3d9d91; }
.nav-item.active span { color:#238277; }
.nav-dashboard-entry { color:#155f58; border-color:#c4e4de; background:#f0f9f7; }
.nav-dashboard-entry:hover { background:#e7f5f2; }
.nav-dashboard-entry.active { color:#0d5e56; background:#dff1ed; }
.nav-group-menu .nav-item { color:#6a8781; }

/* Tenant-aware in-app identity: the authenticated workspace names the
   registered company主体, while the sign-in screen keeps the shared product
   name. The mark is intentionally abstract so no tenant code or initials are
   mistaken for the current company identity. */
.brand {
  align-items:center;
}
.brand-mark {
  position:relative;
  overflow:hidden;
}
.brand-mark::before {
  content:"";
  position:absolute;
  width:17px;
  height:9px;
  border:3px solid #2f887f;
  border-radius:999px;
  transform:rotate(-14deg);
}
.brand-mark b { display:none; }
.brand-copy strong {
  display:-webkit-box;
  max-width:170px;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  color:#173b37;
  font-size:14px;
  line-height:1.32;
  white-space:normal;
  overflow-wrap:anywhere;
}
.brand-copy small {
  margin-top:3px;
  color:#78928d;
  font-size:10px;
}
.auth-brand-mark {
  position:relative;
  overflow:hidden;
}
.auth-brand-mark::before {
  content:"";
  position:absolute;
  width:26px;
  height:13px;
  border:4px solid #8066a3;
  border-radius:999px;
  transform:rotate(-14deg);
}
.auth-brand-mark::after {
  content:"";
  position:absolute;
  right:12px;
  bottom:12px;
  width:16px;
  height:4px;
  border-radius:999px;
  background:#8066a3;
}
.nav-group-menu .nav-item:hover { color:#0f625a; }
.nav-group-menu .nav-item.active { background:#eaf6f3; box-shadow:inset 3px 0 0 #58aa9f; }
.nav-item b { color:#fff; background:#c43d50; }
.sidebar-footer { color:#78928d; border-top-color:#e1ece9; }
@media (max-width:760px) {
  .sidebar { box-shadow:0 8px 22px rgba(22,67,61,.08); }
}
@media (max-width:760px) {
  .sidebar {
    width:100%;
    position:sticky;
    top:0;
  }
  .nav {
    height:auto;
    max-height:calc(var(--sidebar-vh) - 82px);
    display:block;
  }
  .nav-group {
    display:block;
  }
  .nav-group-menu {
    display:grid;
    min-width:0;
    max-height:none;
    overflow:visible;
    margin:0 0 4px 20px;
    padding:6px 0 6px 10px;
    border:0;
    border-left:1px solid rgba(144,201,191,.24);
    background:transparent;
    box-shadow:none;
  }
}

/* Login refinement: single-line brand title with a calm lavender palette. */
.auth-workspace {
  overflow-x:hidden;
  background:radial-gradient(circle at 12% 10%,#eee4fa 0%,transparent 34%),linear-gradient(135deg,#fbf9fe 0%,#eee8f7 100%);
}
.auth-shell {
  width:min(1120px,100%);
  grid-template-columns:minmax(420px,.92fr) minmax(440px,1.08fr);
  border-color:#ded3eb;
  box-shadow:0 28px 80px rgba(78,57,105,.16);
}
.auth-brand-panel {
  min-width:0;
  padding:58px 48px 42px;
  background:linear-gradient(145deg,#5d4b78 0%,#8e78aa 100%);
}
.auth-brand-panel::before,.auth-brand-panel::after {
  border-color:rgba(244,235,255,.22);
}
.auth-brand-panel::before {
  box-shadow:0 0 0 30px rgba(239,224,255,.06),0 0 0 60px rgba(239,224,255,.035);
}
.auth-brand-mark {
  color:#503d6f;
  border-color:#d8c0ed;
  background:linear-gradient(145deg,#fbf5ff,#dcc9ef);
  box-shadow:0 10px 24px rgba(44,29,65,.18);
}
.auth-company { color:#eadff7; }
.auth-brand-panel h1 {
  max-width:none;
  white-space:nowrap;
  overflow:visible;
  color:#fff;
  font-size:clamp(28px,3vw,36px);
  letter-spacing:0;
}
.auth-brand-note { color:#eadff7; }
.auth-brand-footer {
  border-top-color:rgba(244,235,255,.24);
  color:#ddcdec;
}
.auth-kicker { color:#8066a3; }
.auth-panel h2 { color:#403354; }
.auth-intro { color:#7c718b; }
.auth-form label { color:#514362; }
.auth-form input {
  border-color:#d8cce8;
  background:#fefcff;
}
.auth-form input:hover { border-color:#bda8d7; }
.auth-form input:focus {
  border-color:#8066a3;
  box-shadow:0 0 0 4px #eee6f7;
}
.password-toggle { color:#8066a3; }
.password-toggle:hover { color:#5e467e; }
.auth-submit {
  border-color:#8066a3;
  background:#8066a3;
  box-shadow:0 7px 16px rgba(128,102,163,.24);
}
.auth-submit:hover { background:#6e568f; }
.auth-copyright { color:#9b8eaa; }
@media (max-width:980px) {
  .auth-shell { grid-template-columns:1fr; }
  .auth-brand-panel { min-height:230px; }
}
@media (max-width:760px) {
  .auth-brand-panel {
    min-height:200px;
    padding:30px 26px 26px;
    border-top-color:#cdb5e4;
  }
  .auth-brand-panel h1 {
    font-size:clamp(24px,7vw,28px);
  }
}

/* Dashboard milestone list: make the multi-style drill-down readable on desktop and mobile. */
.dashboard-milestone-dialog { width:min(780px,calc(100vw - 28px)); }
.dashboard-milestone-dialog-intro { padding:13px 20px 0; color:#687386; font-size:12px; line-height:1.6; }
.dashboard-milestone-list { display:grid; gap:8px; max-height:min(560px,calc(100vh - 190px)); overflow:auto; padding:14px 20px 20px; }
.dashboard-milestone-row { width:100%; display:grid; grid-template-columns:minmax(130px,1fr) minmax(170px,1.2fr) 110px; gap:12px; align-items:center; padding:12px; border:1px solid #e2e7ef; border-radius:8px; background:#fff; color:var(--ink); text-align:left; transition:border-color .15s ease,background .15s ease,box-shadow .15s ease; }
.dashboard-milestone-row:hover,.dashboard-milestone-row:focus-visible { border-color:#8eb3f5; background:#f8fbff; box-shadow:0 0 0 3px #e6efff; outline:0; }
.dashboard-milestone-style,.dashboard-milestone-node,.dashboard-milestone-due { min-width:0; display:grid; gap:3px; }
.dashboard-milestone-style strong,.dashboard-milestone-node strong,.dashboard-milestone-due strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.dashboard-milestone-style small,.dashboard-milestone-node small,.dashboard-milestone-due small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; }
.dashboard-milestone-node strong { color:#2463eb; }
.dashboard-milestone-due { text-align:right; }
.dashboard-milestone-due strong { color:#6f7b8d; }
.dashboard-milestone-due small { text-align:right; }
@media (max-width:760px) {
  .dashboard-milestone-row { grid-template-columns:1fr; gap:7px; }
  .dashboard-milestone-due,.dashboard-milestone-due small { text-align:left; }
  .dashboard-milestone-dialog-intro { padding-left:14px; padding-right:14px; }
  .dashboard-milestone-list { padding-left:14px; padding-right:14px; }
}

/* Sales KPI overrides are intentionally last so they win over the legacy dashboard grid rules. */
.dashboard-kpi-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
.dashboard-kpi-card.sales { border-color:#b9d2ff; background:linear-gradient(145deg,#f7faff,#fff); }
.dashboard-kpi-card.sales > span { color:#315fa9; font-weight:650; }
.dashboard-kpi-card.sales > strong { color:#1858c7; font-size:27px; overflow-wrap:anywhere; }
.dashboard-sales-panel { margin-bottom:16px; }
.dashboard-sales-panel > .panel-head { min-height:62px; }
.dashboard-sales-panel > .panel-head > a { color:var(--blue); font-size:12px; cursor:pointer; white-space:nowrap; }
.dashboard-sales-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:14px 16px 12px; }
.dashboard-sales-card { min-width:0; display:grid; gap:5px; padding:13px 14px; border:1px solid #e1e7f0; border-radius:7px; background:#fbfcfe; }
.dashboard-sales-card.platform { border-color:#bfd5ff; background:#f7faff; }
.dashboard-sales-card.order { border-color:#dccaf5; background:#fbf9ff; }
.dashboard-sales-card > span { color:#667386; font-size:11px; }
.dashboard-sales-card > strong { color:#263247; font-size:23px; line-height:1.15; overflow-wrap:anywhere; }
.dashboard-sales-card.platform > strong { color:#1858c7; }
.dashboard-sales-card.order > strong { color:#7152c8; }
.dashboard-sales-card > small { min-height:30px; color:#7b8798; font-size:11px; line-height:1.45; }
.dashboard-sales-definition { margin:0; padding:0 16px 14px; color:#687386; font-size:11px; line-height:1.6; }
@media (max-width:1250px) {
  .dashboard-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dashboard-sales-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .dashboard-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-sales-grid { grid-template-columns:1fr; gap:8px; padding:12px; }
  .dashboard-sales-panel > .panel-head { align-items:flex-start; }
  .dashboard-sales-panel > .panel-head > a { margin-top:2px; }
}
/* Tenant registration and platform-admin review */
.tenant-table { min-width:820px; }
.tenant-registration-dialog { max-width:760px; }
.platform-current-tenant { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 16px; padding:18px 20px; border:1px solid #dcd2ef; border-radius:14px; background:linear-gradient(135deg,#fbf9ff,#fff); box-shadow:0 8px 24px rgba(89,64,130,.06); }
.platform-current-tenant h3 { margin:5px 0 7px; color:#3f315d; font-size:18px; }
.platform-current-tenant p { margin:0; color:#697486; font-size:12px; }
.platform-current-tenant p strong { color:#5f4a82; letter-spacing:.04em; }
.platform-boundary-note { max-width:410px; color:#706b7f; font-size:12px; line-height:1.6; text-align:right; }
.tenant-current-tag { display:inline-flex; width:max-content; margin:5px 0 2px; color:#624b87 !important; background:#f0eafe !important; border-color:#ddd0f4 !important; }
.auth-register-link { margin-top:16px; align-self:center; border:0; background:transparent; color:#8066a3; font-size:13px; font-weight:700; cursor:pointer; }
.auth-register-link:hover { color:#634d82; text-decoration:underline; }
@media (max-width:760px) { .platform-current-tenant { display:grid; gap:10px; padding:15px; }.platform-boundary-note { max-width:none; text-align:left; } }

/* Login reliability and HR-backed employee account management. */
.auth-submit:disabled { cursor:wait; opacity:.72; transform:none; box-shadow:none; }
.auth-error:not(:empty) { padding:9px 11px; border:1px solid #f1cbd1; border-radius:8px; background:#fff5f6; line-height:1.55; }
.account-table { min-width:1160px; }
.account-table td:first-child { display:table-cell; }
.account-person,.account-login-identity { min-width:0; display:grid; gap:4px; }
.account-person strong,.account-login-identity strong { color:#25374a; font-size:13px; }
.account-person small,.account-login-identity small { color:var(--muted); font-size:11px; }
.account-binding-state { width:max-content; max-width:100%; padding:3px 7px; border-radius:999px; font-size:11px; white-space:nowrap; }
.account-binding-state.is-bound { color:#276a50; background:#e9f7f0; }
.account-binding-state.is-unbound { color:#a15b16; background:#fff3df; }
.account-login-aliases { display:flex; flex-wrap:wrap; gap:4px; }
.account-login-aliases span { display:inline-flex; align-items:center; min-height:22px; padding:2px 7px; border:1px solid #d9cbea; border-radius:999px; color:#67517f; background:#faf7fd; font-size:11px; }
.account-table .row-actions { min-width:220px; align-items:flex-start; }
.account-dialog { max-width:760px; }
.account-dialog-hint { padding:10px 12px; border:1px solid #e2d8ee; border-radius:8px; color:#675a75; background:#faf8fd; font-size:12px; line-height:1.55; }
.dialog-inline-error { min-height:20px; color:#bd3849; font-size:12px; line-height:1.5; }
.dialog-inline-error:not(:empty) { padding:8px 10px; border:1px solid #f1cbd1; border-radius:7px; background:#fff5f6; }
.label-section { margin:18px 0; padding:16px; border:1px solid #e3def2; border-radius:14px; background:#fcfbff; }
.label-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
.label-preview-grid > div { display:flex; flex-direction:column; gap:5px; padding:12px; border:1px solid #ebe8f4; border-radius:10px; background:#fff; }
.label-preview-grid strong { color:#4e3f73; }
.label-preview-grid span { color:#27324a; font-size:13px; }
.label-preview-grid small { color:#7b8190; line-height:1.5; }
.label-editor-block { margin:14px 0; padding:14px; border:1px solid #ebe8f4; border-radius:12px; background:#fff; }
@media (max-width:760px) { .label-preview-grid { grid-template-columns:1fr; } }
@media (max-width:760px) {
  .account-dialog .form-grid { grid-template-columns:1fr; }
  .account-table .row-actions { min-width:160px; }
}
.tag-editor{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.tag-editor .status-tag{display:inline-flex;align-items:center;gap:6px}.tag-editor button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:16px}.inline-form{display:flex;gap:8px;max-width:420px}.inline-form input{flex:1}.tenant-code-optional{opacity:.82}
.tenant-login-details { margin:0; padding:0; border:1px solid #ebe8f4; border-radius:10px; background:#fcfbff; }
.tenant-login-details summary { padding:10px 12px; color:#6f5b8c; cursor:pointer; font-size:13px; font-weight:700; list-style-position:inside; }
.tenant-login-details[open] summary { border-bottom:1px solid #ebe8f4; }
.tenant-login-details label { margin:12px; }
.tenant-login-details small { display:block; margin:0 12px 12px; color:#7b8190; font-size:12px; line-height:1.5; }