/* 全站布局与组件样式（2026-09 UI 重构）。
   ★ 外壳单源：窗口 + 顶栏 + 侧边栏 + 内容区（.app-container/.topbar/.sidebar/.content）
   的样式唯一存在于本文件，工作台 dashboard.html 与内页 base.html 共用同一套类名、
   同一份 CSS；dashboard 的页面专属样式（KPI/待办/销售榜/快捷入口等）仍留在其内联 <style>。
   外壳区各值按「原样剪切自 dashboard.html」录入，不得改动；颜色仍引用 tokens.css 变量。 */
* { box-sizing: border-box; }
html, body { margin: 0; }
/* 视口恒宽：无论页面是否出现滚动条，右侧始终预留滚动条槽位，
   切换模块时容器居中位置不再左右跳动（工作台与内页同用此规则，
   即原 dashboard.html 内联 html 规则的同值单源）。 */
html { scrollbar-gutter: stable; }

/* body 居中单源（工作台与内页同用）：灰底 #f0f2f5 + flex 居中 + padding 20px，
   窗口定高 calc(100vh - 40px)。字体栈/字号/文字色沿用内页原值（含中文回退与 14px），
   工作台可见文字均自带色值与字号，不受合并影响。 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
  font-size: 14px;
  background: #f0f2f5;
  color: var(--c-text);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

h1, h2, h3, h4 { color: var(--c-text-strong); }

/* ===== 应用窗口容器（单源 = dashboard .app-container 原值：
          1500px 白底圆角 20px 大阴影，body flex 居中，定高 calc(100vh - 40px)） ===== */
.app-container {
  width: 1500px;
  max-width: 100%;
  height: calc(100vh - 40px);
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== 顶部栏（单源 = dashboard .topbar 原值） ===== */
.topbar {
  height: 64px;
  background: #ffffff;
  border-bottom: 1px solid #e8ecf1;
  display: flex;
  align-items: center;
  padding: 0 28px;
  flex-shrink: 0;
}

.topbar .logo {
  font-weight: 700;
  font-size: 18px;
  color: #2b5fd7;
  letter-spacing: 0.5px;
}
.topbar .logo i {
  margin-right: 8px;
  font-size: 20px;
}

.topbar .spacer {
  flex: 1;
}

.topbar .user-info {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  color: #5a6874;
}
.topbar .user-info .greeting {
  font-weight: 500;
  color: #1a2634;
}
.topbar .user-info .role-badge {
  background: #eef2f7;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 12px;
  color: #2b5fd7;
  font-weight: 600;
}
.topbar .user-info .date {
  color: #8a9aa8;
}
.topbar .user-info .logout {
  color: #d05a5a;
  cursor: default;
  font-weight: 500;
}
.topbar .user-info .logout i {
  margin-right: 4px;
}

/* ===== 主体 (左侧菜单 + 内容) ===== */
.main-body {
  display: flex;
  flex: 1;
  min-height: 0; /* 允许在定高窗口内被压缩，内容区才有确定高度 */
  overflow: hidden;
}

/* 左侧菜单（单源 = dashboard .sidebar 原值；ul 的 margin/padding:0 是把
   工作台内联 * 重置对该规则的原有效果显式化——内页无 * 重置也需要它） */
.sidebar {
  width: 200px;
  background: #f7f9fc;
  border-right: 1px solid #e8ecf1;
  padding: 20px 0 20px 12px;
  flex-shrink: 0;
  overflow-y: auto;
  /* 滚动条槽位常驻：有无滚动条内容宽度不变（与 .content 同层内部滚动容器保持一致） */
  scrollbar-gutter: stable;
}
.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar li {
  padding: 10px 16px 10px 14px;
  margin-bottom: 2px;
  border-radius: 8px 0 0 8px;
  font-size: 14px;
  color: #3d4a5a;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: default;
  transition: 0.15s;
}
.sidebar li i {
  width: 20px;
  font-size: 16px;
  color: #6f7d8c;
}
.sidebar li.active {
  background: #ffffff;
  color: #2b5fd7;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #2b5fd7;
}
.sidebar li.active i {
  color: #2b5fd7;
}
.sidebar li:not(.active):hover {
  background: #eef2f7;
}

/* 右侧内容区（单源 = dashboard .content 原值 + min-width:0）：
   定高窗口内、内容超高时内部滚动；min-width:0 为内页原 .content 同值，
   防止宽表格把定宽窗口撑破（对工作台无观感影响，内容本就适配）。
   内页在 .content 内包一层 .content-flow 承接各页 content block（直通块级层），
   使外壳的 flex 纵排 gap:24px 只作用于工作台自己的块，内页块间距保持原有 margin 节奏。 */
.content {
  flex: 1;
  min-width: 0;
  padding: 20px 28px 28px 28px;
  overflow-y: auto;
  /* 滚动条槽位常驻：html 已有 scrollbar-gutter:stable，此为第二层内部滚动容器，需各自声明；
     有无滚动条内容宽度不变（与工作台 .todo-list 同理） */
  scrollbar-gutter: stable;
  background: #f7f9fc;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* 修复「定死窗口」：所有 .content 直接子项禁止收缩（flex-shrink:0），
   内容超高时由 .content 内部滚动，页面级永不滚动。 */
.content > * {
  flex-shrink: 0;
}

/* ---- 滚动条美化 ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: #cdd8e6; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #b4c4d8; }

/* ---- 登录页/匿名页（浅灰底 + 白卡居中 + 主蓝按钮） ----
   body 已是 flex 居中（见上），.center 不再需要 min-height:100vh，
   整屏居中由 body 负责，登录卡观感不变。 */
main.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card { width: 360px; padding: 36px 32px; }
.login-card h1 { font-size: 20px; margin: 0 0 24px; text-align: center; color: var(--c-primary); letter-spacing: .5px; }
.login-card label { display: block; margin-bottom: 14px; color: var(--c-text-sub); }
.login-card input {
  display: block; width: 100%; margin-top: 6px;
  padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 8px;
  background: var(--c-card); color: var(--c-text); font: inherit;
}
.login-card input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(43, 95, 215, .12); }
.alert-error {
  background: var(--c-danger-bg); border: 1px solid #ffd6d3; color: var(--c-danger-deep);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; font-size: 13px;
}

/* ---- 卡片 ---- */
.card {
  background: var(--c-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); border: 1px solid var(--c-border);
}
.page-head h2 { margin: 0 0 4px; font-size: 20px; }
.page-head p { margin: 0 0 20px; color: var(--c-text-sub); }

.grid-modules {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px;
}
.mod-card {
  display: flex; flex-direction: column; gap: 6px; padding: 18px;
  color: var(--c-text); text-decoration: none; transition: .15s;
}
.mod-card:hover { border-color: var(--c-primary); color: var(--c-primary); box-shadow: 0 6px 16px rgba(26, 38, 52, .08); }
.mod-card span { font-size: 15px; font-weight: 600; }
.mod-card small { color: var(--c-text-sub); }

.empty { padding: 40px; max-width: 560px; margin-top: 8vh; }
.empty p { color: var(--c-text-sub); line-height: 1.7; }
.btn-primary {
  display: inline-block; background: var(--c-primary); color: #fff;
  padding: 9px 18px; border: none; border-radius: 8px; cursor: pointer;
  text-decoration: none; font-size: 14px; transition: .15s;
}
.btn-primary:hover { background: var(--c-primary-hover); }
.login-card .btn-primary { width: 100%; margin-top: 6px; padding: 10px 18px; }

/* ---- M1：列表与表单组件 ---- */
.toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.toolbar input[type="text"], .toolbar input[type="search"] {
  padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 8px; width: 220px;
  background: var(--c-card); color: var(--c-text); font: inherit;
}
.toolbar input[type="text"]:focus, .toolbar input[type="search"]:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(43, 95, 215, .12);
}
.inline-form { display: inline; }

table.grid {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--c-card);
  font-size: var(--fs-table); box-shadow: var(--shadow-card);
  border: 1px solid var(--c-border); border-radius: var(--radius-card); overflow: hidden;
}
table.grid th, table.grid td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--c-border); }
table.grid th { background: var(--c-panel); color: var(--c-text-sub); font-weight: 600; white-space: nowrap; }
table.grid tr:last-child td { border-bottom: none; }
table.grid tr:hover td { background: var(--c-primary-soft); }
table.grid a.rowlink { color: var(--c-link-blue); text-decoration: none; font-weight: 600; }
table.grid a.rowlink:hover { text-decoration: underline; }

.pill {
  display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px;
  background: var(--c-bg); border: 1px solid var(--c-border); line-height: 1.6;
}
/* pill 语义三态（设计稿 status-tag 形态：浅底 + 深字） */
.pill.st-ok, .pill.st-green { background: var(--c-ok-bg); border-color: #b7eb8f; color: var(--c-ok-deep); }
.pill.st-orange { background: var(--c-warn-bg); border-color: #ffe58f; color: var(--c-warn-deep); }
.pill.st-red { background: var(--c-danger-bg); border-color: #ffa39e; color: var(--c-danger-deep); }
.pill.st-gray { background: var(--c-bg); border-color: var(--c-border); color: var(--c-text-sub); }
.pill.st-blue { background: #e6f0ff; border-color: #b8ccf0; color: var(--c-primary); }
.pill.st-disabled { background: var(--c-bg); border-color: var(--c-border); color: var(--c-text-weak); }
.flag-highintent { color: var(--c-warn-deep); font-weight: 700; margin-left: 6px; }

.form-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px 16px; padding: 18px;
}
.form-grid label { display: block; color: var(--c-text-sub); font-size: 13px; }
.form-grid label > input, .form-grid label > select, .form-grid label > textarea {
  width: 100%; margin-top: 5px; padding: 8px 10px;
  border: 1px solid var(--c-border); border-radius: 8px; font: inherit;
  background: var(--c-card); color: var(--c-text);
}
.form-grid label > input:focus, .form-grid label > select:focus, .form-grid label > textarea:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(43, 95, 215, .12);
}
.form-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
.btn-sub {
  display: inline-block; padding: 8px 14px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--c-border); border-radius: 8px;
  background: var(--c-card); color: var(--c-text); transition: .15s;
}
.btn-sub:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-soft); }
.btn-danger { border-color: var(--c-danger-red); color: var(--c-danger-red); }

.detail-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 960px) { .detail-layout { grid-template-columns: 1fr; } }
.kv { padding: 6px 0; border-bottom: 1px dashed var(--c-border); display: flex; gap: 12px; }
.kv:last-child { border-bottom: none; }
.kv b { min-width: 96px; color: var(--c-text-sub); font-weight: 500; }
.img-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.img-thumbs img {
  width: 130px; height: 130px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--c-border); background: var(--c-bg);
}
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 8px 0 8px 14px; border-left: 2px solid var(--c-border); position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--c-disabled-gray);
}
.timeline .t-meta { color: var(--c-text-weak); font-size: 12px; }

/* ---- M2 订单 ---- */
.transition-form { display: inline-flex; gap: 6px; align-items: center; margin: 4px 10px 4px 0; }
.transition-form input[type="text"] { padding: 6px 8px; border: 1px solid var(--c-border); border-radius: 8px; }
.decide-form { display: inline-flex; gap: 6px; align-items: center; margin-right: 12px; }
.decide-form input[name="comment"] { padding: 6px 8px; border: 1px solid var(--c-border); border-radius: 8px; width: 180px; }
.order-items-table td input, .acc-table td input { width: 100%; min-width: 70px; padding: 6px 8px; border: 1px solid var(--c-border); border-radius: 6px; box-sizing: border-box; }
.order-items-table td input:focus, .acc-table td input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(43, 95, 215, .15); }
/* 模具建档卡：刀口/维修动态行的裸输入框，统一到全站输入框样式 */
#bladeRows input, #repRows input { padding: 6px 8px; border: 1px solid var(--c-border); border-radius: 6px; box-sizing: border-box; font: inherit; background: var(--c-card, #fff); color: var(--c-text); }
#bladeRows input:focus, #repRows input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(43, 95, 215, .15); }
/* 弹窗内裸下拉/文本域兜底统一（不再出现浏览器默认样式） */
dialog select, dialog textarea { padding: 6px 8px; border: 1px solid var(--c-border); border-radius: 6px; font: inherit; background: var(--c-card, #fff); color: var(--c-text); }
@media (max-width: 960px) { .detail-layout { display: block; } .card { margin-bottom: 16px; } }

/* ---- 弹窗 dialog（全站统一：白卡圆角 + 遮罩；模板内联只留宽度等布局值） ---- */
dialog {
  border: none; border-radius: 14px; padding: 0;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
  color: var(--c-text);
}
dialog::backdrop { background: rgba(15, 23, 42, .45); }

/* ---- M4：生产/包装/异常（进度条 + 分区看板卡片 + 提示条） ---- */
.progress-wrap { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.progress-wrap.big { margin: 10px 0 14px; }
.progress-bar {
  flex: 1; height: 8px; border-radius: 999px; background: var(--c-bg);
  border: 1px solid var(--c-border); overflow: hidden;
}
.bar-fill { display: block; height: 100%; border-radius: 999px; transition: width .2s; }
.bg-disabled { background: var(--c-disabled-gray); }
.pct { font-size: 12px; color: var(--c-text-sub); min-width: 34px; text-align: right; }

.board-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; align-items: start; }
.board-col h3 { margin: 0 0 10px; font-size: 14px; color: var(--c-text-sub); }
.board-col .cnt { color: var(--c-primary); }
.plan-card { display: block; padding: 12px 14px; margin-bottom: 10px; color: var(--c-text); text-decoration: none; transition: .15s; }
.plan-card:hover { border-color: var(--c-primary); box-shadow: 0 6px 16px rgba(26, 38, 52, .08); }
.plan-card.muted { opacity: .75; }
.plan-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.plan-meta { color: var(--c-text-sub); font-size: 12px; margin: 4px 0; }
.plan-nums { font-size: 12px; color: var(--c-text-sub); }

.flash-ok { background: var(--c-ok-bg); border: 1px solid #b7eb8f; color: var(--c-ok-deep); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }
.hint { color: var(--c-text-weak); font-size: 12px; }
.inline-actions { display: flex; gap: 8px; }
.inline-actions select { padding: 6px 8px; border: 1px solid var(--c-border); border-radius: 8px; }

.exc-banner { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.exc-chip { padding: 8px 14px; font-size: 13px; }
.exc-chip b { font-size: 15px; margin-left: 4px; }
td.wrap .inline-form { display: flex; gap: 6px; }
td.wrap .inline-form input[type="text"] { width: 200px; padding: 6px 8px; border: 1px solid var(--c-border); border-radius: 8px; }

/* ==== M5/M6 (m56-manifest ## css_additions) ==== */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.tab{padding:6px 14px;border:1px solid var(--c-border);border-radius:999px;text-decoration:none;color:inherit;background:var(--c-card);transition:.15s}
.tab:hover{border-color:var(--c-primary);color:var(--c-primary)}
.tab.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.bar-track{display:inline-block;vertical-align:middle;min-width:120px;height:8px;margin-right:8px;background:var(--c-border);border-radius:999px;overflow:hidden}
.bar{height:100%;border-radius:999px;background:var(--brand)}
.bar-orange{background:var(--c-warn-orange)}
.bar-ok{background:var(--c-ok)}
.cards-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.big-number{font-size:44px;font-weight:700;margin:8px 0;color:var(--c-text-strong)}
.row-danger{background:var(--c-danger-bg)}
.overdue-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.kv-list{padding-left:18px;display:grid;gap:6px}
/* 同名规则 .inline-form 已存在于 M1 基线（display:inline），按 m56 幂等口径保留现网，跳过 */
.wide-input{flex:1;min-width:140px}
.param-form{max-width:420px}
.mark-preview{white-space:pre-wrap;border:1px dashed #cdd8e6;padding:10px;border-radius:8px;background:var(--c-panel)}
.notices .unread .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c-danger-red);margin-right:6px}
.banner-hint{border:1px dashed #cdd8e6;border-radius:8px;padding:8px 12px;background:var(--c-panel)}
/* 打印面单虽为内联样式，此块兜底隐藏全局元素（选择器随外壳单源化同步改名为 .sidebar/.app-container） */
@media print{ .topbar,.sidebar,.no-print{display:none!important} .app-container{box-shadow:none!important;margin:0!important;border-radius:0!important;width:auto!important;max-width:none!important} body{margin:0;padding:0;background:#fff;display:block} .content{margin:0;padding:0} }

/* ==== 移动端适配（手机网页端响应式；仅小屏生效，桌面端 >900px 渲染与上方既有规则完全一致） ====
   断点：≤900px 平板竖屏/手机横屏（外壳改造：窗口满宽贴边 + 页面级滚动 + 侧边栏改顶部横滑菜单条
   + 顶栏精简）；≤600px 手机（表单/工具栏单列、弹窗收窄、触摸友好、表格横向滑动兜底）。 */
@media (max-width: 900px) {
  /* 1) 窗口容器：宽度 100%、外边距 0，高度改 min-height:100vh（跟随内容、页面级滚动），
        圆角/阴影去掉（贴边更自然）。 */
  body {
    height: auto;
    min-height: 100vh;
    display: block;
    padding: 0;
  }
  .app-container {
    width: 100%;
    height: auto;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
  /* 登录页 body 已改为块级流：main.center 自撑整屏保持居中观感 */
  main.center { min-height: 100vh; padding: 0 12px; }

  /* 2) 侧边栏 → 顶部横向可滑动菜单条：置于 topbar 之下、内容之上
        （flex 横排 + overflow-x:auto，菜单项胶囊样式沿用现有配色） */
  .main-body { flex-direction: column; overflow: visible; }
  .sidebar {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid #e8ecf1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
  }
  .sidebar ul {
    display: flex;
    gap: 6px;
    width: max-content;
    min-width: 100%;
  }
  .sidebar li {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
    margin-bottom: 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: #eef2f7;
  }
  .sidebar li.active {
    background: #ffffff;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px #b8ccf0, 0 1px 4px rgba(43, 95, 215, 0.10);
  }

  /* 3) 内容区：定高窗口内部滚动改为跟随内容（页面级滚动），内边距收窄 */
  .content { overflow-y: visible; padding: 14px 14px 24px; }

  /* 7) 顶栏精简：brand 字号缩小，日期隐藏（用户名/角色徽章/退出保留） */
  .topbar { height: 56px; padding: 0 14px; }
  .topbar .logo { font-size: 15px; }
  .topbar .logo i { font-size: 16px; }
  .topbar .user-info { gap: 12px; }
  .topbar .user-info .date { display: none; }
}

@media (max-width: 600px) {
  /* 7) 手机上 user-info 进一步精简：角色徽章隐藏（用户名 + 退出保留） */
  .topbar .user-info { gap: 10px; }
  .topbar .user-info .role-badge { display: none; }

  /* 5) 工具栏：flex-wrap 基线已有；搜索/筛选输入占满剩余宽度（可换行成整行） */
  .toolbar input[type="text"], .toolbar input[type="search"] { flex: 1 1 150px; width: auto; min-width: 0; }

  /* 8) 触摸友好：按钮最小高度 ≥40px */
  .btn-primary, .btn-sub { min-height: 40px; }

  /* 4) 表格兜底：固定布局明细/配件表在窄屏放开最小宽度，
        由其模板中的 overflow-x 包裹层横向滑动，不撑破窗口 */
  table.order-items-table, table.acc-table { min-width: 640px; }

  /* 5) 表单栅格单列 + 动作区可换行 */
  .form-grid { grid-template-columns: 1fr; padding: 14px; }
  .form-actions { flex-wrap: wrap; }

  /* 财务工作台双栏看板（模板内联两列样式）在手机上恢复单列堆叠 */
  .cards-two { grid-template-columns: 1fr !important; }

  /* 6) 弹窗：模板已用 min(Npx,9xvw) 约束宽度，此处补高度上限并收窄内边距 */
  dialog { max-width: 94vw; max-height: 90vh; }
  dialog .form-grid { padding: 12px 14px 4px; }
}

/* ===== 侧边栏显隐开关（第五十四批）：topbar 汉堡按钮 + html.sidebar-hidden ===== */
.sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:6px;border:1px solid #dfe6ef;border-radius:8px;background:#f6f9fd;color:#536b89;font-size:15px;cursor:pointer;flex:0 0 auto;transition:background .15s,color .15s}
.sidebar-toggle:hover{background:#e8f0fc;color:#285eea}
html.sidebar-hidden .main-body>.sidebar{display:none}