/* 全站共用的左侧边栏，配合 app-shell.js。 */
.ark-shell{
  --shell-w:232px; --shell-w-collapsed:64px; --shell-bar-h:52px;
  --shell-line:var(--line);
  --shell-text:var(--glass-text);
  --shell-text2:var(--glass-text-dim);
  --shell-dim:var(--glass-text-dim);
  --shell-hover:rgb(127 127 127 / .16);
  --glass-shadow:0 0 0 transparent;
  --shell-accent:var(--accent);
  --shell-accent-bg:var(--accent-bg);
  --shell-font:var(--ui);
  box-sizing:border-box;flex:none;position:sticky;top:0;z-index:30;
  display:flex;flex-direction:column;width:var(--shell-w);height:100vh;height:100dvh;
  padding:16px 12px;
  font-family:var(--shell-font);font-size:14px;line-height:1.4;color:var(--shell-text2);
  transition:width .2s cubic-bezier(.16,1,.3,1);
}
.ark-shell *{box-sizing:border-box}

/* 按身份隐藏：data-role / data-where / data-keys / data-auth 由 app-shell.js 写在 html 上 */
:root[data-keys="managed"] .keys-config,
:root[data-role="user"] .admin-only,
:root[data-external] .staff-only,
:root[data-where="lan"] .local-only,
:root:not([data-where="lan"]) .lan-only{display:none!important}

/* 页面两栏：body 加 ark-shell-page，内容区加 ark-shell-main */
.ark-shell-page{display:flex;align-items:flex-start;min-height:100vh}
/* 设置里的服务商：管理员改公司的，账号登录的员工填自己的，访问码模式的普通用户看不到 */
:root[data-role="user"]:not([data-keys="managed"]) .keys-edit{display:none!important}
.ark-shell-page::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--page-wash);pointer-events:none}
.ark-shell-main{flex:1;min-width:0}

.ark-shell-bar{display:flex;align-items:center;gap:4px;padding:0 0 18px;flex:none}
.ark-shell-brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;padding:0 4px;
  color:var(--shell-text);font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.ark-shell-logo{width:30px;height:30px;flex:none;display:block;object-fit:contain;border-radius:50%}
.ark-shell-logo-dark{display:none}
:root[data-theme="dark"] .ark-shell-logo-dark{display:block}
:root[data-theme="dark"] .ark-shell-logo-light{display:none}
.ark-shell-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ark-shell .ark-shell-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:32px;height:32px;padding:0;border:0;border-radius:var(--radius-control);background:transparent;color:var(--shell-dim)}
.ark-shell .ark-shell-icon:hover{background:var(--shell-hover);color:var(--shell-text)}
.ark-shell-menu{display:none!important}

.ark-shell-panel{display:flex;flex-direction:column;flex:1;min-height:0}
.ark-shell .ark-shell-top button{width:100%;height:30px;margin-bottom:10px;justify-content:center}
.ark-shell-nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.ark-shell-group{display:flex;flex-direction:column;gap:4px}
.ark-shell-group.has-rule::before{content:"";height:1px;margin:0 8px 8px;background:var(--shell-line)}
.ark-shell-label{padding:2px 10px 4px;font-size:12px;color:var(--shell-dim)}

.ark-shell .ark-shell-item{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 10px;
  border:0;border-radius:var(--radius-control);background:transparent;color:var(--shell-text2);
  font-family:inherit;font-size:14px;line-height:1.4;text-align:left;text-decoration:none;cursor:pointer}
.ark-shell .ark-shell-item svg{flex:none}
.ark-shell .ark-shell-item:hover{background:var(--shell-hover);color:var(--shell-text)}
.ark-shell .ark-shell-item.on{background:var(--shell-accent-bg);color:var(--shell-accent);font-weight:600}
.ark-shell a:focus-visible,.ark-shell button:focus-visible{outline:2px solid var(--shell-accent);outline-offset:-2px}

.ark-shell-badge{margin-left:auto;padding:1px 5px;border:1px solid var(--shell-line);border-radius:var(--radius-tag);
  font-size:11px;font-weight:400;color:var(--shell-dim)}
.ark-shell-value{margin-left:auto;font-size:12px;color:var(--shell-dim)}

.ark-shell-foot{flex:none;display:flex;flex-direction:column;gap:4px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--shell-line)}
.ark-shell-account{display:flex;align-items:center;gap:10px;height:46px;padding:0 8px;color:var(--shell-dim)}
.ark-shell-account[hidden],.ark-shell-login[hidden]{display:none}
.ark-shell-login{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;padding:0 10px;border:0;border-radius:var(--radius-control);background:var(--accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer}
.ark-shell-account.is-menu{cursor:pointer;border-radius:var(--radius-control)}
.ark-shell-account.is-menu:hover{background:var(--shell-hover)}
.ark-shell-foot{position:relative}
.ark-shell-accmenu{position:absolute;left:0;right:0;bottom:calc(100% - 96px);z-index:5;display:flex;flex-direction:column;gap:8px;
  padding:8px;border-radius:var(--radius-card)}
.ark-shell-accmenu[hidden]{display:none}
.ark-shell .ark-shell-accmenu button{height:34px;padding:0 10px;border:0;border-radius:var(--radius-control);
  background:transparent;color:var(--shell-text);font-size:13px;text-align:left}
.ark-shell .ark-shell-accmenu button:hover{background:var(--shell-hover)}
.ark-shell-admin{display:flex;gap:6px}
.ark-shell-admin input{flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid var(--shell-line);
  border-radius:var(--radius-control);background:var(--field);color:var(--text);font-size:13px;outline:none}
.ark-shell .ark-shell-admin button{flex:none;background:var(--shell-accent);color:#fff;text-align:center}
.ark-shell .ark-shell-admin button:hover{background:var(--shell-accent);opacity:.88}
.ark-shell-admin-err{margin:0;color:var(--err);font-size:12px}
.ark-shell-admin-err:empty{display:none}
.ark-shell-avatar{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;
  border-radius:50%;background:var(--shell-hover)}

/* 主题图标跟着 html 上的 data-mode 走，不用脚本换 */
.ark-shell-theme-light,.ark-shell-theme-dark{display:none}
:root[data-mode="light"] .ark-shell-theme-light,
:root[data-mode="dark"] .ark-shell-theme-dark{display:block}
:root[data-mode="light"] .ark-shell-theme-auto,
:root[data-mode="dark"] .ark-shell-theme-auto{display:none}

/* 折叠成图标栏：只在宽屏生效，窄屏走下面的抽屉 */
@media (min-width:900px){
  .ark-shell.is-collapsed{width:var(--shell-w-collapsed)}
  .is-collapsed .ark-shell-bar{flex-direction:column;gap:10px}
  .is-collapsed .ark-shell-brand{flex:none;padding:0}
  .is-collapsed .ark-shell-text,
  .is-collapsed .ark-shell-label,
  .is-collapsed .ark-shell-badge,
  .is-collapsed .ark-shell-value{display:none}
  .ark-shell.is-collapsed .ark-shell-item{justify-content:center;padding:0}
  .is-collapsed .ark-shell-account{justify-content:center;padding:0}
  .ark-shell.is-collapsed .ark-shell-top button{padding:0;font-size:0}
  .is-collapsed .ark-shell-accmenu{left:0;right:auto;width:220px}
  .ark-shell.is-collapsed .ark-shell-top button::before{content:"↻";font-size:14px}
}

/* 窄屏：顶部一行 + 左侧抽屉 */
@media (max-width:899.98px){
  .ark-shell-page{display:block}
  /* backdrop-filter 会让里面的 fixed 抽屉改以顶栏为基准，所以窄屏不用模糊，顶栏和抽屉都是实色 */
  .ark-shell.glass{width:100%;height:var(--shell-bar-h);padding:0 12px;background:var(--glass-solid);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .ark-shell-bar{height:100%;padding:0}
  .ark-shell-collapse{display:none!important}
  .ark-shell-menu{display:inline-flex!important}
  .ark-shell-scrim{position:fixed;inset:var(--shell-bar-h) 0 0;background:rgb(0 0 0 / .32);
    opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
  .ark-shell-panel{position:fixed;top:var(--shell-bar-h);bottom:0;left:0;width:min(280px,84vw);
    padding:12px;background:var(--glass-solid);box-shadow:0 0 0 .5px var(--glass-edge);
    transform:translateX(-100%);visibility:hidden;
    transition:transform .22s cubic-bezier(.16,1,.3,1),visibility .22s}
  .ark-shell.is-open .ark-shell-scrim{opacity:1;visibility:visible}
  .ark-shell.is-open .ark-shell-panel{transform:none;visibility:visible}
}

@media (prefers-reduced-motion:reduce){
  .ark-shell,.ark-shell-scrim,.ark-shell-panel{transition:none}
}
.ark-shell-quota{display:flex;flex-direction:column;gap:4px;padding:6px 8px;color:var(--shell-dim);font-size:12px;text-decoration:none}
.ark-shell-quota[hidden]{display:none}
.ark-shell-quota b{display:block;height:4px;overflow:hidden;border-radius:2px;background:var(--shell-hover)}
.ark-shell-quota i{display:block;height:100%;background:#d97706}
.is-collapsed .ark-shell-quota{display:none}